Build modern Next.js apps with App Router and best practices
At a glance
- Source: community
- Category: engineering
- Scope: project
- User-invocable: no
Location
.claude/skills/modern-best-practice-nextjs/
Auto-generated by
scripts/sync-skills-content.ts. Add your own notes below — re-runs preserve the body and your soft frontmatter fields.
SKILL.md
.claude/skills/modern-best-practice-nextjs/SKILL.md
---
name: modern-best-practice-nextjs
description: Build modern Next.js apps with App Router and best practices
---
# 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
Install it elsewhere with curl -o .claude/skills/modern-best-practice-nextjs/SKILL.md --create-dirs https://uxlab.designcoder.net/api/skills/modern-best-practice-nextjs/source. Record what you changed in this page's notes.