What's New in App Router?

Next.js 14 uses App Router by default. It supports React Server Components and dramatically improves performance.

Project Structure

app/
├── layout.tsx      # Shared layout
├── page.tsx        # Home page
├── about/
│   └── page.tsx    # /about route
└── blog/
    ├── page.tsx    # /blog route
    └── [slug]/
        └── page.tsx  # /blog/:slug dynamic route

Server vs Client Components

// Server Component (default)
async function ProductList() {
  const products = await fetchProducts();
  return 
{products.map(p => 
{p.name}
)}
;
}

// Client Component (opt-in)
'use client';
function Counter() {
  const [count, setCount] = useState(0);
  return ;
}

Conclusion

App Router changes how we build React applications. Server Components deliver better performance and simpler data fetching.