Getting Started with Next.js App Router

Why Next.js App Router?

The App Router represents a paradigm shift in how we build React applications. Instead of the traditional client-side rendering approach, it embraces React Server Components (RSC) by default.

Key Concepts

Server Components by Default

Every component in the app/ directory is a Server Component unless explicitly marked with "use client". This means:

• Components can directly access the filesystem and databases
• No JavaScript is sent to the client for these components
• Bundle size is significantly reduced

File-Based Routing

The directory structure directly maps to URL routes:

• app/page.tsx → /
• app/about/page.tsx → /about
• app/projects/[slug]/page.tsx → /projects/:slug

Practical Tips

1. Keep data fetching close to where it's used
2. Use loading.tsx for instant loading states
3. Leverage generateStaticParams for static generation

// Example: generateStaticParams for a blog
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}