Next.js 16 App Router: A Complete Guide

Next.js 16 brings powerful new features to the App Router. Let's explore how to use them effectively.

Server Components by Default

In Next.js 16, all components in the app directory are Server Components by default:

// app/page.tsx - This is a Server Component
export default async function HomePage() {
  const data = await fetchData() // Direct server-side data fetching
  return <div>{data.title}</div>
}

Client Components

When you need interactivity, add the 'use client' directive:

'use client'

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  )
}

Layouts and Templates

Create shared layouts that persist across route changes:

// app/blog/layout.tsx
export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="blog-container">
      <nav>Blog Navigation</nav>
      {children}
    </div>
  )
}

Summary

Next.js 16 App Router provides a powerful foundation for building modern web applications. Start with Server Components, add Client Components where needed, and leverage layouts for consistent UI.