next-best-practices

name	next-best-practices
description	Use when: build Next.js App Router apps with correct file conventions, RSC boundaries, and data flow.

Goal: idiomatic App Router code, not ported Pages Router habits.

Use for:

• structuring routes, layouts, and error boundaries
• placing the server/client boundary correctly
• handling async APIs, params, and metadata

Workflow:

1. Use App Router file conventions: layout, page, loading, error.
2. Default to server components; add "use client" only where needed.
3. Fetch data on the server, close to where it is used.
4. Parallelize independent fetches; avoid request waterfalls.
5. Await async APIs (params, searchParams, headers, cookies).
6. Set metadata via the metadata API, not ad hoc tags.

Conventions:

• co-locate route segments with their UI and loading states
• keep client components small and at the leaves
• use route handlers for API endpoints
• stream with Suspense for slow data

Rules:

• do not reach for Pages Router patterns in App Router
• mark client boundaries narrowly and intentionally
• never block the whole page on one slow request
• keep secrets and data access on the server