Routes, layouts, and file conventions

Build durable URL trees with page, layout, template, loading, error, not-found, and route files. Understand segment nesting, layout persistence, template remounting, and why colocated files are not automatically public.

Production mental model

Next.js 16 is a server-first React framework. Decide whether work belongs in a Server Component, Client Component, Server Action, Route Handler, proxy, or cached function based on trust, interactivity, serialization, HTTP semantics, and freshness. Request APIs such as params, searchParams, cookies, and headers are asynchronous and must be awaited.

Implementation discipline

Keep privileged work and secrets on the server. Validate untrusted input at runtime, authorize beside protected data, return minimal serializable view models, and make loading, empty, error, retry, and success states accessible. For caching, distinguish request memoization, explicit use cache scopes, tagged data, stale-while-revalidate, and read-your-writes behavior instead of applying one policy globally.

Applied practice

Design a localized dashboard route tree with isolated loading and error states.

Common failure modes

Avoid unnecessary client boundaries, sequential data waterfalls, broad invalidation, trusting hidden UI as authorization, non-idempotent retries, and hydration workarounds that conceal invalid markup or unstable output. Measure behavior in the deployed runtime before optimizing.

Takeaways

• Choose boundaries from trust, rendering, and freshness requirements.
• Await Next.js 16 request APIs and keep server authority explicit.
• Validate, authorize, test, observe, and recover at production boundaries.