The Complete Guide to Next.js 16 App Router
Everything you need to know about Next.js 16's App Router — from layouts and loading states to parallel routes and intercepting routes.
What Changed in Next.js 16
Next.js 16 brings significant improvements to the App Router, making it the definitive way to build React applications. The key changes include improved streaming, better error handling, and new route patterns.
Layouts: The Foundation
Layouts are the building blocks of your application's UI architecture. They persist across navigations and maintain state.
Warning
Layouts do not re-render on navigation. If you need fresh data on every navigation, use a page component instead.
Loading States
The loading.tsx convention gives you instant loading UI.
Route Groups
Organize routes without affecting URLs using parenthesized folders.
Server Components by Default
Every component in the App Router is a Server Component unless you opt in with "use client". This means zero JavaScript shipped to the client by default, direct database access in components, and smaller bundle sizes.
Parallel Routes
Render multiple pages simultaneously in the same layout. This is incredibly powerful for dashboards where independent sections load at different speeds.
Written by
Sarah Chenadmin
Senior frontend engineer and tech writer. Passionate about React, TypeScript, and building great developer experiences. Previously at Vercel and Stripe.
Comments (2)
Great overview! One question — how do you handle authentication in the App Router? I've been struggling with middleware vs layout-level auth checks.
The parallel routes section was incredibly helpful. We just implemented this pattern in our dashboard and it improved perceived load time significantly.
Keep reading
technology
Building a Real-Time Dashboard with Server-Sent Events
WebSockets aren't always the answer. Learn how Server-Sent Events provide a simpler, more reliable way to push real-time data to your dashboard.