next-generate-path

Type-safe URL generation with autocomplete for all your routes. Inspired by React Router's generatePath.

generatePath("/blog/[slug]", { slug: "hello-world" });
//            ^ autocomplete for all routes     ^ type-checked params

generatePath("/about"); // static routes need no params
generatePath("/blog/[slug]"); // TS error: missing params

Works directly with <Link>, redirect(), and router.push().

Setup

npm install next-generate-path

Wrap your Next.js config:

// next.config.js
import { withTypedRoutes } from "next-generate-path/next";

export default withTypedRoutes({});

Run next dev or next build once to generate route types, then:

import { generatePath } from "next-generate-path";

<Link href={generatePath("/blog/[slug]", { slug: "hello" })}>Read</Link>

Route types

// Dynamic
generatePath("/blog/[slug]", { slug: "hello-world" }); // => "/blog/hello-world"

// Catch-all
generatePath("/docs/[...segments]", { segments: ["guides", "routing"] }); // => "/docs/guides/routing"

// API routes work too
generatePath("/api/products/[id]", { id: "42" }); // => "/api/products/42"

Requirements

• Next.js 14+ with App Router
• TypeScript

License

MIT