Next.js 16 App Router — What's New and Why It Matters

The App Router Is Now the Default

Next.js 16 completes the transition started in version 13: the App Router is now the recommended approach for all new projects, and the Pages Router is in maintenance mode. The App Router's co-location of server and client components, nested layouts, and streaming support represents a fundamentally better model for building modern web applications.

Parallel Routes and Intercepting Routes

Two of the most powerful — and most misunderstood — features in the App Router. Parallel routes let you render multiple pages simultaneously in the same layout, enabling dashboards with independently loading sections and modals that show alongside the page they're triggered from. Intercepting routes let you show a photo in a modal when navigating from a feed, but the full photo page when opening a direct link. Instagram-style navigation with no client-side trickery.

• @folder convention creates named slots in your layout
• (.) matches same-level routes, (..) matches one level up
• useSelectedLayoutSegment reads the active parallel slot
• Loading and error boundaries work per-slot independently

Server Actions Have Matured

Server Actions — async functions that run on the server, callable directly from client components — are now stable and significantly more capable. Progressive enhancement is built in: forms work without JavaScript. You can now call Server Actions from event handlers, not just forms. The new revalidatePath and revalidateTag APIs make cache invalidation straightforward. Combined with useOptimistic, you get instant UI updates with server-confirmed state.

What to Migrate First

If you're on the Pages Router, don't rewrite everything. Start by migrating leaf pages that don't share layouts — blog posts, product detail pages, documentation. Move shared data fetching to Server Components. Migrate forms to Server Actions one at a time. The two routers can coexist in a single project during transition, so there's no cliff edge.