next-typed-routes

Type-safe routing helpers for Next.js App Router.

String-typed routes haunt my dreams. This is a small library that gives you compile-time-checked links and router.push() calls in the App Router.

import { route } from 'next-typed-routes';

// ✅ OK
<Link href={route('/posts/[slug]', { slug: 'hello' })} />

// ❌ Type error: missing 'slug'
<Link href={route('/posts/[slug]', {})} />

// ❌ Type error: route doesn't exist
<Link href={route('/typo', {})} />

Install

pnpm add next-typed-routes

Then add the codegen step to your package.json:

{
  "scripts": {
    "dev": "next-typed-routes --watch & next dev",
    "build": "next-typed-routes && next build"
  }
}

The codegen scans your app/ directory and emits a typed routes.gen.ts.

Why not next/link?

next/link accepts any string. Refactor a route, your Links break silently at runtime. With this, they break at compile time.

Limitations

• App Router only. Pages Router is unsupported (and will stay unsupported).
• Catch-all routes ([...slug]) are typed as string[]. Optional catch-all ([[...slug]]) as string[] | undefined.
• Route groups ((group)) are stripped, as they should be.

License

MIT.