Next.js Routing

Next.js 15 App Router basics — file-system routing, layouts, server components, loading states, error boundaries, and route segments.

Layouts wrap pages with shared UI that persists across navigations. They never remount — use templates when you need fresh state.

Use bracket syntax to create routes that match dynamic URL segments — single params, catch-all segments, and optional catch-all patterns.

Route groups use (folderName) parentheses to organize routes without affecting the URL structure. They enable multiple layouts at the same route level.

Special files loading.tsx, error.tsx, and not-found.tsx create automatic Suspense boundaries and Error Boundaries scoped to route segments.

Middleware runs before every matched request, enabling redirects, rewrites, header modifications, and authentication checks at the edge.

Intercepting routes let you load a route within the current layout during client-side navigation while preserving the full page on direct URL access or refresh.

Parallel routes use @slot folders to render multiple pages simultaneously within a single layout. Each slot is an independent route segment with its own loading

Navigate between routes using the <Link> component, programmatic useRouter, URL-reading hooks, and server-side redirect.

A condensed summary of the 25 most important best practices drawn from every page in this section.