# Next.js App Router Next.js App Router discipline for modern Next.js applications. ## Rules 1. **Server Components by default.** Fetch data on the server. Client Components only when you need interactivity, browser APIs, or hooks. `"use client"` is opt-in, not the default. 2. **Colocate data fetching with the component that needs it.** Server Components fetch directly — no prop-drilling fetch results through three layers. 3. **Route handlers for API endpoints.** `app/api/` routes for backend logic. Don't mix API handlers into page components. 4. **Loading and error boundaries are files.** `loading.tsx` and `error.tsx` in route segments — not inline spinners scattered through components. 5. **Cache deliberately.** `fetch` caching, `revalidate`, `unstable_cache` — understand what Next.js caches by default and override when freshness matters. 6. **Metadata in `layout.tsx` and `page.tsx`.** SEO, Open Graph, and titles via the Metadata API — not manual `` tags in client components. ## What This Replaces Treating App Router like Pages Router with `"use client"` everywhere, fetching in `useEffect` what should be server-rendered, and ignoring built-in loading and error conventions. ## Official Source Distilled from Vercel's Next.js best practices skills. Full upstream: https://officialskills.sh/vercel-labs/skills/next-best-practices