01
Map files to predictable URLs
index.tsx represents a directory route, ordinary names become path segments, and bracketed names describe parameters. Keep names small and predictable.
02
Generate known docs at build time
Use getStaticPaths for predictable dynamic documentation slugs. Validate parameters and never let a parameter create a path outside output.
03
Choose output deliberately
Use static for documentation and immutable content, server for request-specific output, ISR only with an explicit cache contract, and streaming for large or asynchronous HTML.
export async function getStaticPaths() {
return guides.map((guide) => ({ params: { slug: guide.slug } }))
}PRACTICAL LABS
Run this capability.
Each example states the observable output, the boundary that remains your responsibility, and the check that proves the result.
01
Generate known article paths
TSXexport const staticPaths = ['first-boundary', 'release-check']
export default function Article({ slug }: { readonly slug?: string }) {
return <article><h1>{slug ?? 'Article'}</h1></article>
}- OUTPUT
- The build emits one directory-style HTML page for each slug.
- BOUNDARY
- Never turn unchecked request input into a file path, redirect, or cache key.
- PROVE IT
- Run pnpm build and inspect dist/client/articles/first-boundary/index.html.
02
Choose render mode from data
Textstatic → public docs known at build time
server → request-specific/private output
isr → public data with an explicit cache adapter- OUTPUT
- Cache policy follows data classification rather than page naming.
- BOUNDARY
- Do not share-cache session or account HTML.
- PROVE IT
- Request a missing route and verify an actual 404 response.
VERIFICATION
Prove the contract.
Check generated route directories, a real 404 path, GET/HEAD behavior, and cache headers for the selected render mode.