Blog CMS Kit

Published

1 min read241 words

## 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:

```tsx
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>
  )
}
```

> **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:

```tsx
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.