mcpField
M
modern-best-practice-nextjs

modern-best-practice-nextjs

github.com/academindDevelopment1166 installsUpdated 40w ago
Repository

About modern-best-practice-nextjs

A coding-agent skill for current Next.js App Router practices, covering routing, data fetching, UI states, and metadata. It directs agents to consult current documentation because Next.js changes frequently.

Key features

  1. 01App Router routing and layouts
  2. 02Server Components by default
  3. 03Server Actions for mutations
  4. 04Loading and error UI states
  5. 05Metadata API and SEO guidance

Use cases

  1. 01Starting a new Next.js App Router project
  2. 02Choosing server and client component boundaries
  3. 03Adding loading and error handling to routes
  4. 04Setting page metadata for SEO

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/academind/ai-config --skill modern-best-practice-nextjs

After installing, type/modern-best-practice-nextjsin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported