![\"Goggles](\"https://em-content.zobj.net/source/apple/354/goggles_1f97d.png\")
\n\n \n
\n ![\"Latest](\"https://github.com/lukemorales/next-safe-navigation/actions/workflows/tests.yml/badge.svg?branch=main\"){kind=icon}
\n ![](\"https://codecov.io/gh/lukemorales/next-safe-navigation/graph/badge.svg?token=35GW5EJMFK\"/){kind=icon}
\n \n
\n
\n
\n
\n
\n
![\"GitHub](\"https://img.shields.io/github/stars/lukemorales/next-safe-navigation.svg?style=social&label=Star\")
\n
\n Static type and runtime validation for navigating routes in NextJS App Router with Standard Schema support (Zod, Valibot, ArkType, etc.).\n
\n\n\n Static and runtime validation of routes, route params and query string parameters on client and server components.\n
\n\n## 📦 Install\n\nSafe NextJS Navigation is available as a package on NPM, install with your favorite package manager:\n\n```dircolors\nnpm install next-safe-navigation\n```\n\nYou'll also need to install a Standard Schema compatible validation library:\n\n```dircolors\n# Choose one:\nnpm install zod # Zod (most popular)\nnpm install valibot # Valibot (lightweight)\nnpm install arktype # ArkType (fast)\n```\n\n## ⚡ Quick start\n\n> [!TIP]\n> Enable `experimental.typedRoutes` in `next.config.js` for a better and safer experience with autocomplete when defining your routes\n\n### Declare your application routes and parameters in a single place\n\n```ts\n// src/shared/navigation.ts\nimport { createNavigationConfig } from 'next-safe-navigation';\nimport { z } from 'zod';\n\nexport const { routes, useSafeParams, useSafeSearchParams } =\n createNavigationConfig((defineRoute) => ({\n home: defineRoute('/'),\n customers: defineRoute('/customers', {\n search: z\n .object({\n query: z.string().default(''),\n page: z.coerce.number().default(1),\n })\n .default({ query: '', page: 1 }),\n }),\n invoice: defineRoute('/invoices/[invoiceId]', {\n params: z.object({\n invoiceId: z.string(),\n }),\n }),\n shop: defineRoute('/support/[...tickets]', {\n params: z.object({\n tickets: z.array(z.string()),\n }),\n }),\n shop: defineRoute('/shop/[[...slug]]', {\n params: z.object({\n // ⚠️ Remember to always set your optional catch-all segments\n // as optional values, or add a default value to them\n slug: z.array(z.string()).optional(),\n }),\n }),\n }));\n```\n\n### Runtime validation for React Server Components (RSC)\n\n> [!IMPORTANT]\n> The output of a schema might not be the same as its input, since schemas can transform the values during parsing (e.g.: string to number coercion), especially when dealing with `URLSearchParams` where all values are strings and you might want to convert params to different types. For this reason, this package does not expose types to infer `params` or `searchParams` from your declared routes to be used in page props:\n>\n> ```ts\n> interface CustomersPageProps {\n> // ❌ Do not declare your params | searchParam types\n> searchParams?: ReturnType