Next.js Best Practices

The skill that keeps an agent on the rails when it writes Next.js — so it picks the right boundary, the right runtime, and the right place for metadata without me correcting it.

Overview

The App Router has sharp edges: server versus client components, where async data fetching belongs, when to reach for 'use client', how metadata and route handlers work, and which runtime a given route should target. This skill captures the conventions so generated code follows them instead of mixing paradigms.

What it does

• Defaults to Server Components; adds 'use client' only where interactivity demands it.
• Keeps data fetching on the server and pushes state down to small client leaves.
• Uses the metadata API and route handlers idiomatically.
• Chooses Node vs Edge runtime deliberately, with the trade-offs in mind.

Install

Vendored in .agents/skills/next-best-practices/ and pinned in skills-lock.json, so it's active for any agent working in this repo. The distribution pattern for skills like this is skills.sh — npx skills add <owner>/<name> to pull it into another project.

Usage

I lean on it through the Development phase. It shows up as fewer hydration mistakes and cleaner server/client splits — the agent stops sprinkling 'use client' everywhere and keeps the server boundary where it belongs. This site's own App Router structure follows the same conventions.