foundation
Dynamic routes
Model route parameters, catch-all segments, static params, not-found states, and canonical URLs.
Dynamic segments use bracket folders: `[slug]`, catch-all `[...slug]`, and optional catch-all `[[...slug]]`. Params arrive as strings; validate and narrow before use. `generateStaticParams` prebuilds paths for SSG; missing params can trigger `notFound()`.
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
const posts = await getPosts();
return posts.map((p) => ({ slug: p.slug }));
}
Canonical URLs matter for SEO when multiple paths resolve similar content — use metadata and redirects deliberately.
On interviews: explain static param generation, runtime param access, and 404 versus empty states.
Common pitfalls: trusting unvalidated params in queries, generating unbounded static paths at build, and duplicate content without canonical links.
The trade-off is URL flexibility versus build cost and duplicate indexing risk.
Checklist:
- Validate params before data access.
- Use generateStaticParams for known catalogs.
- Call notFound for missing resources.
- Set canonical metadata for aliases.