typedRoutes

typedRoutes?: boolean // default: false

typedRoutes makes Next.js emit a declaration file describing every route in your app, then uses it to type the href prop of next/link. In the App Router it also types the push, replace and prefetch methods returned by useRouter. Pages Router next/router methods are not typed.

When to reach for it

Turn it on in any TypeScript app where routes get renamed or deleted. A moved folder under app/ becomes a compile error at every link that pointed at it, instead of a 404 someone finds in production.

What trips people up

• Only literal strings are checked. A value built at runtime needs a cast: href={('/blog/' + slug) as Route}. Template literals with dynamic segments are fine.
• The generated types live in .next/types. If the project was not created by create-next-app, add ".next/types/**/*.ts" to include in tsconfig.json or every href resolves to never.
• Routes only reachable through proxy.ts rewrites or redirects do not exist as files, so they are not valid Route values and need a cast.
• A component that wraps Link must accept a generic Route<T>, otherwise callers lose the checking.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  typedRoutes: true,
}

export default nextConfig

{
  "include": [
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

'use client'

import type { Route } from 'next'
import Link from 'next/link'
import { useRouter } from 'next/navigation'

export default function Example() {
  const router = useRouter()
  const slug = 'nextjs'

  return (
    <>
      <Link href="/about">About</Link>
      <Link href={`/blog/${slug}`}>Post</Link>
      {/* TypeScript error: '/aboot' is not a route */}
      <Link href="/aboot">Typo</Link>

      <button onClick={() => router.push('/about')}>Push About</button>
      <button onClick={() => router.push(('/blog/' + slug) as Route)}>
        Push concatenated
      </button>
    </>
  )
}

import type { Route } from 'next'
import Link from 'next/link'

export function Card<T extends string>({
  href,
  title,
}: {
  href: Route<T> | URL
  title: string
}) {
  return (
    <Link href={href}>
      <div>{title}</div>
    </Link>
  )
}