Quick tip: Typing NextJs router query params with Zod coerce

Dec 14, 2022 - 1 min read

Strongly type and coerce your router query params data with Zod Coercion for primitives.

Create a hook to extend useRouter

Here we are getting a Zod schema as an argument to parse (z.parse) and type (z.infer) our query params.

1
import { useRouter } from 'next/router'
2
import { z } from 'zod'
3

4
export const useTypedRouter = <T extends z.Schema>(schema: T) => {
5
  const { query, ...router } = useRouter()
6

7
  return {
8
    query: schema.parse(query) as z.infer<typeof schema>,
9
    ...router
10
  }
11
}

Usage

The routerSchema uses the coerce feature from Zod to transform the type of our query string, here boolean and number.

1
const routerSchema = z.object({
2
  someText: z.coerce.string().optional().default('some-default-text'),
3
  someNumber: z.coerce.number().optional(),
4
  someBool: z.coerce.boolean().optional()
5
})
6

7
export default () => {
8
  const { query } = useTypedRouter(routerSchema)
9

10
  return (
11
    <div>
12
      ...
13
    </div>
14
  )
15
}

For a URL like /?someNumber=4, query.someNumber is now a number instead of a string | string[].