gem-hunter

next-zod-router

Motivation

Features

Demo

Usage

Installation

## npm
npm install next-zod-router

## yarn
yarn add next-zod-router

Server-side

// pages/api/sample.ts
import { ApiHandler, createRouter, validate } from "next-zod-router";
import { z } from "zod";

/* Schema definition using zod */
const postValidation = {
  body: z.object({
    foo: z.string(),
  }),
  query: z.object({
    bar: z.string().optional(),
  }),
  res: z.object({
    message: z.string(),
  }),
}

const getValidation = {
  query: z.object({
    bar: z.string().optional(),
  }),
  res: z.object({
    message: z.string(),
  }),
}    

/* Routing */
const router = createRouter()

router
  .use((req, res, next) => {
    console.log("middleware");
    return next()
  })
  .post(
    validate(postValidation),
    (req, res) => {
      req.body.foo;
      req.query.bar;
      res.status(200).json({ message: "ok" });
    })
  .get(
    validate(getValidation),
    (req, res) => {
      req.query.bar;
      res.status(200).json({ message: "ok" });
    })

/* Type export */
// the export type name should be as follows
// so that the type definition file can be generated correctly via the command.
export type PostHandler = ApiHandler<typeof postValidation>
export type GetHandler = ApiHandler<typeof getValidation>

/* Routing handling export */
export default router.run()

Type generation

## npm
npx next-zod-router

## yarn
yarn next-zod-router

{
  "scripts": {
    "apigen": "next-zod-router"
  }
}

npm run apigen

Client-side

import { client } from "next-zod-router";

// Type-safe API call
const { data, error } = await client.post("/api/sample", {
  query: {
    bar: "baz",
  },
  body: {
    foo: "bar",
  },
})

dynamic routing

Server-side

// pages/api/[id].ts

const getValidation = {
  // 👇 for server side validation
  // 👇 also necessary for client side url construction
  query: z.object({
    id: z.string().optional(),
  }),
}

router
  .get(
    validate(getValidation),
    (req, res) => {
      req.query.id;
      res.status(200).json({ message: "ok" });
    })

Client-side

// client.ts
import { client } from "next-zod-router";

client.get("/api/[id]", {
  query: {
    id: "1",
  },
})

// url will be /api/1

Error handling

throw error

// pages/api/sample.ts
router
  .post(
    validate(postValidation),
    (req, res) => {
      const session = getSession(req)
      if (!session) {
        throw createError(401, "Unauthorized")
      }
      res.status(200).json({ message: "ok" });
    })

custom error handling

// pages/api/sample.ts

router
  .onError((err, req, res) => {
    // custom error handling
    res.status(err.statusCode).json({ message: err.message });
  })

Middleware

// pages/api/sample.ts
import cors from "cors";
import { createRouter, validate } from "next-zod-router";
import { z } from "zod";

const postValidation = {
  res: z.object({
    message: z.string(),
  }),
}

router
  .use(cors())
  .post(
    validate(postValidation),
    (req, res) => {
      res.status(200).json({ message: "ok" });
    })

Command options

next-zod-router --pagesDir=src/pages

Tips

Add session property to Request type

// global.d.ts
import { IncomingMessage } from "http";

declare module 'next' {
  export interface NextApiRequest extends IncomingMessage {
    session: Session
  }
}

Next.js development

{
  "scripts": {
    "dev": "npm-run-all -p dev:*",
    "dev:next": "next dev",
    "dev:apigen": "next-zod-router -w"
  }
}