# Next Best Practices

> Use when: build Next.js App Router apps with correct file conventions, RSC boundaries, and data flow.

- Skill: `kimtth/next-best-practices` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kimtth/next-best-practices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kimtth/next-best-practices/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kimtth (https://skillmd.com/u/kimtth)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kimtth/next-best-practices

---


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