Getting Started with Next.js 14 App Router

Introduction

Next.js 14 introduced significant improvements to the App Router, making it the recommended way to build new Next.js applications. In this post, I'll walk through the key concepts and patterns you need to know.

Server Components vs Client Components

One of the most important concepts in the App Router is the distinction between Server Components and Client Components.

Server Components (the default) run only on the server:

• Can directly access databases and file systems
• Keep sensitive data on the server
• Reduce the JavaScript bundle sent to the client

Client Components (marked with "use client") run in the browser:

• Can use React hooks like useState and useEffect
• Can handle user interactions
• Have access to browser APIs

Data Fetching

The App Router simplifies data fetching by allowing you to fetch data directly in Server Components:

async function PostList() {
  const posts = await db.posts.findMany();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Conclusion

The Next.js App Router represents a significant step forward in React development. By understanding Server Components, the new data fetching patterns, and routing conventions, you can build faster, more efficient web applications.