Paso 3

Rutas

El routing es 100% por archivos, sobre src/pages/. Cada .tsx es una ruta; los corchetes marcan segmentos dinámicos.

Rutas estáticas

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

pages/about.tsx se sirve en /about. pages/products/index.tsx se sirve en /products.

Rutas dinámicas

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

pages/products/[slug].tsx captura :slug y lo expone en params.slug — se resuelve al vuelo con nexa preview/dev, o se pre-renderiza a HTML estático si declara paths (lo vemos en el paso de datos).

Segmentos con varios parámetros

// src/pages/[locale]/products/[slug].tsx  ->  /:locale/products/:slug
// params.locale y params.slug, los dos a la vez

Una ruta puede combinar varios: pages/[locale]/products/[slug].tsx captura ambos a la vez — este mismo tutorial usa exactamente ese patrón para /es y /en.