Profile My skills Saved Collections Edit profile Submit a skill

Modern Best Practice Nextjs

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

ddoman90 9446f24 944 B Updated
Web & Frontend

File contents

Next.js Best Practices (App Router)

Next.js changes frequently - use web search or Context7 MCP (via DocsExplorer agent) for 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, 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

ddoman90/claude-code-intro/tree/main/.claude/skills/modern-best-practice-nextjs commit 9446f24bfc

Browse category

Frequently asked questions

npx skillmds@latest add ddoman90/modern-best-practice-nextjs