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.

Learn 25 key Next.js routing best practices, including handling async params, avoiding route collisions, using template.tsx, and parsing dynamic segment types.

A single-page roundup of every highlight bullet from the 10 pages in the Next.js Routing section, grouped by source page so you can scan all 60 takeaways without opening each article individually.