Next.js App Router: A Practical Guide for Real Projects

When Next.js 13 introduced the App Router, it was a paradigm shift. Server Components became the default, layouts became nestable, and the mental model for data fetching changed completely.

Server Components by Default

Every component in the app/ directory is a Server Component unless you add "use client". This means you can fetch data directly inside components without useEffect or external state management.

Layouts That Persist

Layouts in the App Router don't re-render when you navigate between pages. This means your navbar, sidebar, and footer stay mounted — no flash of unstyled content, no lost scroll position.

Loading and Error States

Drop a loading.tsx file next to any page.tsx and Next.js automatically shows it while the page data loads. Same with error.tsx for error boundaries. No more manual loading state management.

When to Use "use client"

Only add "use client" when you need interactivity: onClick handlers, useState, useEffect, or browser APIs. Keep the boundary as low in the component tree as possible.

My Production Patterns

• Fetch data in Server Components, pass to Client Components as props
• Use generateStaticParams for static generation of dynamic routes
• Colocate loading and error states with each route segment
• Use route groups (marketing) to share layouts without affecting URLs

The App Router isn't just a new API — it's a new way of thinking about React applications.