Getting Started with Next.js App Router

Next.js introduced the App Router in version 13 and it became stable in version 14. It's a significant shift from the Pages Router, and understanding the key concepts upfront saves a lot of confusion.

Server Components by default

In the App Router, all components are Server Components by default. They render on the server and send HTML to the client - no JavaScript is shipped for those components.

This means:

• Fast initial page loads
• Data fetching at the component level
• No getServerSideProps or getStaticProps boilerplate

When to use 'use client'

Add 'use client' to the top of a file when the component:

• Uses React hooks (useState, useEffect, etc.)
• Handles browser events
• Uses browser-only APIs (like localStorage)

File-based routing

Routes are defined by the folder structure inside app/:

app/
├── page.tsx           → /
├── about/
│   └── page.tsx       → /about
└── blog/
    └── [id]/
        └── page.tsx   → /blog/:id

Static generation

Use generateStaticParams to pre-render dynamic routes at build time:

export async function generateStaticParams() {
  return [{ id: "my-post" }, { id: "another-post" }];
}

This gives you the performance of static HTML with the flexibility of dynamic routing.

---

The App Router has a learning curve, but once it clicks, it's a genuinely better model for building web apps.