This guide was originally published on my personal portfolio

What is Zod?

Zod is a TypeScript-first schema declaration and validation library, Created by Colin McDonnell. Unlike Yup, Zod is TypeScript-first which means it has a lot of features for TypeScript developers.

Zod comes with some really great features like:

• Works in Node.js and browsers (including IE 11)
• Zero dependencies
• Works with JavaScript too

Why do you need to validate your API Calls?

Validating your API Calls helps you get the right data that you want, For example, you want your users to have a strong password(e.g. at least 6 characters), You can use something like Zod or Yup and prevent users from entering a short password(less than 6 characters). Also, doing validation on the server makes your server much more secure, Because no one can open the developer tools, go through your code, and figure out how to beat your validation.

Let's start coding

First, Create an empty directory and navigate into it:

mkdir schema-validation-with-zod-and-expressjs
cd schema-validation-with-zod-and-expressjs

Then, Initialize a Node.js project and add the necessary dependencies:

npm init -y
npm install express zod

Next, add the following script to our package.json file.

{
  // ...
  "scripts": {
    "dev": "node index.js"
  }
  // ...
}

Now let's start an Express.js server. Create a file called index.js at the root of the project:

const express = require("express");

const app = express();

app.use(express.json());

app.listen(1337, () => console.log(`> Ready on http://localhost:${1337}`));

Then run the Express.js server(You can access it at http://localhost:1337).

npm run dev

Next, we can start working with Zod, Let's first import z from zod and add a simple login schema.

const express = require("express");
const { z } = require("zod");

const app = express();

app.use(express.json());

const LoginSchema = z.object({
  // In this example we will only validate the request body.
  body: z.object({
    // email should be valid and non-empty
    email: z.string().email(),
    // password should be at least 6 characters
    password: z.string().min(6),
  }),
});

// ...

Now we are going to create our middleware for Zod validation.

// ...

const validate = (schema) => (req, res, next) => {
  try {
    schema.parse({
      body: req.body,
      query: req.query,
      params: req.params,
    });

    next();
  } catch (err) {
    return res.status(400).send(err.errors);
  }
};

// ...

Finally, we are going to create a route(/login) for POST requests, which we will use our middleware(validate) to perform the validation of the request body.

// ...

// pass LoginSchema to validate middleware
app.post("/login", validate(LoginSchema), (req, res) => {
  return res.json({ ...req.body });
});

// ...

The final code would be as follows:

const express = require("express");
const { z } = require("zod");

const app = express();

app.use(express.json());

const LoginSchema = z.object({
  // In this example we will only validate the request body.
  body: z.object({
    // email should be valid and non-empty
    email: z.string().email(),
    // password should be at least 6 characters
    password: z.string().min(6),
  }),
});

const validate = (schema) => (req, res, next) => {
  try {
    schema.parse({
      body: req.body,
      query: req.query,
      params: req.params,
    });

    next();
  } catch (err) {
    return res.status(400).send(err.errors);
  }
};

app.post("/login", validate(LoginSchema), (req, res) => {
  return res.json({ ...req.body });
});

app.listen(1337, () => console.log(`> Ready on http://localhost:${1337}`));

Conclusion

In this guide, We learned how to validate our Express.js REST API Calls using Zod, You can find the code on GitHub.

Make sure to contact me if you have any questions.

Note: Contentlayer is still in development and some APIs might change!

What is Contentlayer?

Contentlayer turns your content into data - making it super easy to import MD(X) and CMS content in your app.

Automatic Setup

The easiest way to create a new Next.js app with Contentlayer is by using official Next.js example, which sets up everything automatically for you. To create a project, run:

npx create-next-app --example with-contentlayer with-contentlayer-app
# or
yarn create next-app --example with-contentlayer with-contentlayer-app

After the installation is complete:

• Run npm run dev or yarn dev to start the development server on http://localhost:3000.
• Visit http://localhost:3000 to view your application

Manual Setup

Install Contentlayer in your Next.js app

npm install contentlayer next-contentlayer
# or
yarn add contentlayer next-contentlayer

Add your Contentlayer config

Create contentlayer.config.js file at the root of the project with the following code.

import { defineDocumentType, makeSource } from "contentlayer/source-files";

const Post = defineDocumentType(() => ({
  name: "Post",
  filePathPattern: `**/*.md`,
  contentType: "markdown",
  fields: {
    title: { type: "string", required: true },
    date: { type: "string", required: true },
  },
  computedFields: {
    slug: {
      type: "string",
      resolve: (doc) => doc._raw.sourceFileName.replace(/\.md/, ""),
    },
  },
}));

export default makeSource({
  contentDirPath: "posts",
  documentTypes: [Post],
});

Set up Next.js plugin in next.config.js (optional: enables live-reload and build setup)

const { withContentlayer } = require("next-contentlayer");

module.exports = withContentlayer({
  // Your Next.js config...
});

Add a jsconfig.json file

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "contentlayer/generated": ["./.contentlayer/generated"]
    }
  },
  "include": [".contentlayer/generated"]
}

In case you are using TypeScript in your project you already have a tsconfig.json to which you will add these lines of code to.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
       // These option allow you to configure module aliases.
       // So you will import contentlayer generated content from "contentlayer/generated" instead of "./.contentlayer/generated"
+      "contentlayer/generated": ["./.contentlayer/generated"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
+    ".contentlayer/generated"
  ],
}

Add some posts

1. Add posts folder at the root of your app(Where your content will live).
2. Add .md files(e.g. pre-rendering.md).
3. Add your content(You can write anything you want, This is just an example).

---
title: "Two Forms of Pre-rendering"
date: "2020-01-01"
---

Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.

- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.

Importantly, Next.js lets you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

Fetch and display your posts

import Link from "next/link";
import { allPosts } from "contentlayer/generated";
import { pick } from "@contentlayer/client";

export default function Home({ posts }) {
  return (
    <section>
      <ul>
        {posts.map(({ slug, date, title }) => (
          <li key={slug}>
            <Link href={`/posts/${slug}`}>
              <a>{title}</a>
            </Link>
            <br />
            <small>{date}</small>
          </li>
        ))}
      </ul>
    </section>
  );
}

// Statically fetch all posts
export async function getStaticProps() {
  const posts = allPosts.map((post) => pick(post, ["title", "date", "slug"]));

  return { props: { posts } };
}

Create dynamic routes for each post

In this section, you should know how dynamic routes works in Next.js,

Add posts/[slug].js inside pages folder.

import { allPosts } from 'contentlayer/generated'

export default function Post({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <div>{post.date}</div>

      <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
    </article>
  )
}

export async function getStaticPaths() {
  return {
    paths: allPosts.map((p) => ({ params: { slug: p.slug } })),
    fallback: false,
  }
}

// Statically fetch post by slug
export async function getStaticProps({ params }) {
  const post = allPosts.find((post) => post.slug === params?.slug)

  return { props: { post } }
}

Now we are done 🎉, Check http://localhost:3000 to see the results!

Conclusion

In this guide, We learned about how we can integrate Next.js with Contentlayer, As well as how we can display all posts and post by slug.

An online demo of the application that we built is hosted on Vercel and the code is available on GitHub for TypeScript version check out this GitHub branch.

Thanks to Johannes Schickling for providing this really great tool! Make sure to contact me if you have any questions.