The Complete Guide to Next.js 16 App Router

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:

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex min-h-screen">
      <Sidebar />
      <main className="flex-1 p-6">{children}</main>
    </div>
  )
}

Loading States

The loading.tsx convention gives you instant loading UI:

export default function Loading() {
  return <DashboardSkeleton />
}

Route Groups

Organize routes without affecting URLs using parenthesized folders:

app/
├── (marketing)/
│   ├── about/page.tsx     → /about
│   └── blog/page.tsx      → /blog
├── (app)/
│   ├── dashboard/page.tsx → /dashboard
│   └── settings/page.tsx  → /settings

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
• Smaller bundle sizes

Parallel Routes

Render multiple pages simultaneously in the same layout:

app/
├── @analytics/page.tsx
├── @team/page.tsx
└── layout.tsx

This is incredibly powerful for dashboards where independent sections load at different speeds.