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.