About Next.js App Router Basics

File conventions, server vs client, data fetching, snags. Part of the DevTools Surf developer suite. Browse more tools in the Info / Guides collection.

Use Cases

• React developers migrating from Pages Router to App Router
• Full-stack devs understanding server vs client component boundaries
• Teams evaluating Next.js for a new project's architecture
• Frontend devs learning file-based routing and nested layouts

Tips

• Read the server vs client component section before writing any code
• Check the file conventions list for layout.tsx and loading.tsx usage
• Review the data fetching patterns to avoid client-side waterfalls

Fun Facts

• Next.js was created by Guillermo Rauch and first released by Vercel (then ZEIT) in October 2016 with just 6 pages of documentation.
• The App Router, introduced in Next.js 13 (October 2022), was a complete rewrite of the routing system, replacing the Pages Router after 6 years.
• React Server Components, which the App Router is built on, were first previewed by the React team in December 2020 but took over two years to stabilize.

FAQ

Pages router vs App router?

App Router is the new default (Next.js 13+). Supports React Server Components, streaming, nested layouts. Pages Router is maintained but not the future.

Server vs client components?

Server Components are default — they render on the server, don't ship JS to the client. Add 'use client' when you need state, effects, or browser APIs.

Data fetching?

In server components: just `await fetch(...)` directly. Next.js deduplicates and caches automatically. Client components need SWR, React Query, or useEffect.

Common gotchas?

Forgetting 'use client' (causes hydration errors), caching surprises (fetch is cached by default), and the generateStaticParams requirement for dynamic routes.