Blitz is in beta! 🎉 1.0 expected in May or June
Back to Documentation Menu

Route Manifest


Jump to a Topic

Blitz generates a Route Manifest for you. It allows you to refer to a page by name instead of location:

// Assume you have a page at app/pages/products/[productId].tsx
export default function ProductPage() { ...

// You can then use Routes...
import { Link, Routes } from "blitz"

// refer to it by name...
<Link href={Routes.ProductsPage({ productId: 123 })} />

// ...instead of looking up the location!
<Link href={`/products/${123}`} />

The Route Manifest is a purely optional feature. It has some advantages, though:

  • improved expressiveness
  • simplifies moving pages to new locations

Query Parameters

Query parameters can be specified together with route parameters.

// instead of ...
<Link href={`/products/${pid}?offerCode=capybara`} />

// ... you can do:
<Link href={Routes.Product({ pid, offerCode: "capybara" })} />

Generating the Manifest

The Route Manifest is generated into node_modules/.blitz directly from your source code into. Both blitz build and blitz dev will automatically keep it up-to-date.
If you need to manually generate the route manifest, for example for a typecheck in CI, use blitz codegen.

Idea for improving this page? Edit it on GitHub.