Getting Started with Next.js App Router

The Next.js App Router represents a paradigm shift in how we build React applications. Built on React Server Components, it offers unprecedented performance and developer experience.

What is the App Router?

The App Router is a new routing system introduced in Next.js 13 and stabilized in Next.js 14+. It lives in the app/ directory and brings several key improvements:

• Server Components by default - Better performance and SEO
• Nested layouts - Share UI across routes
• Loading states - Built-in support for loading UI
• Error handling - Automatic error boundaries

Key Concepts

1. File-based Routing

app/
  page.tsx          // → /
  blog/
    page.tsx        // → /blog
    [slug]/
      page.tsx      // → /blog/:slug

2. Server vs Client Components

By default, all components are Server Components. Use the "use client" directive when you need:

• State management (useState, useReducer)
• Effect hooks (useEffect)
• Browser APIs
• Event handlers

"use client";

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

3. Data Fetching

Server Components can async/await directly:

async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

Why Migrate?

The benefits are compelling:

1. Better Performance - Automatic code splitting and optimized bundles
2. Improved SEO - Server-rendered by default
3. Simplified Data Fetching - No more getServerSideProps
4. Better UX - Streaming and Suspense built-in

Getting Started

Create a new Next.js app with the App Router:

npx create-next-app@latest my-app
cd my-app
npm run dev

That's it! You're ready to build modern web applications with Next.js.

Conclusion

The App Router is the future of Next.js development. While there's a learning curve, the benefits in performance, developer experience, and user experience make it well worth the investment.

Happy coding! 🚀