# Modern Best Practice Nextjs

> Build modern Next.js apps with App Router and best practices

- Skill: `majiayu000/modern-best-practice-nextjs` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/modern-best-practice-nextjs`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/modern-best-practice-nextjs/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/modern-best-practice-nextjs

---


# Next.js Best Practices (App Router)

Next.js is a library that changes frequently - use web search or context7 MCP (via DocsExplorer agent) for exploring the current documentation.

## Routing & Structure

- Use the App Router in `app/` for new work
- Use nested layouts and route groups to organize sections
- Keep server components as the default; add `'use client'` only where needed

## Data Fetching & Caching

- Fetch data in React Server Components - AVOID fetching via `useEffect()` and `fetch()`
- Use server actions ("Server Functions") for mutations, potentially in conjunction with React Hooks like `useActionState`

## UI States

- Provide `loading.tsx` and `error.tsx` for route-level UX
- Use `Suspense` boundaries around async UI

## Metadata & SEO

- Use the Metadata API in layouts and pages
- Prefer static metadata when possible; keep dynamic metadata minimal