Step 3

Routing

Routing is 100% file-based, over src/pages/. Every .tsx is a route; brackets mark dynamic segments.

Static routes

src/pages/
├── index.tsx              ->  /
├── about.tsx              ->  /about
└── products/
    ├── index.tsx          ->  /products
    └── [slug].tsx         ->  /products/:slug

pages/about.tsx is served at /about. pages/products/index.tsx is served at /products.

Dynamic routes

// src/pages/products/[slug].tsx
export default function ProductPage() {
    return <h1>{params.slug}</h1>;
}

pages/products/[slug].tsx captures :slug and exposes it as params.slug — resolved on the fly with nexa preview/dev, or pre-rendered to static HTML if it declares paths (covered in the data step).

Segments with several parameters

// src/pages/[locale]/products/[slug].tsx  ->  /:locale/products/:slug
// both params.locale and params.slug at once

A route can combine several: pages/[locale]/products/[slug].tsx captures both at once — this very tutorial uses exactly that pattern for /es and /en.