Next.js 16 App Router: Comprehensive Guide

Next.js 16 stands out with its revolutionary features in the web development world. In this article, we will examine the core concepts and best practices of the App Router.

What are Server Components?

Server Components is a concept introduced with React 18 and popularized with Next.js 13+. These components are rendered on the server side and sent to the client only as HTML.

Advantages:

• Less JavaScript: The amount of JS sent to the client is reduced
• Direct database access: Database queries can be made without an API layer
• Hidden API keys: Sensitive information is not sent to the client

Client Components

Components marked with the 'use client' directive run in the browser. They are used for interactive features.

'use client';

import { useState } from 'react';

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

Routing Structure

App Router uses file-system based routing:

app/
├── page.tsx          # / (Home page)
├── about/
│   └── page.tsx      # /about
├── blog/
│   ├── page.tsx      # /blog
│   └── [slug]/
│       └── page.tsx  # /blog/[slug]
└── api/
    └── contact/
        └── route.ts  # API endpoint

Conclusion

Next.js 16 App Router provides a powerful foundation for developing modern web applications. The correct use of Server and Client components makes a big difference in terms of performance and user experience.