# nextjs-best-practices

App Router architecture principles for Claude Code. Guides the agent to keep components server-side, configure caching, and organize folder layouts.

- skill · `type=skill` · Claude Code · 1785 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/nextjs-best-practices
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/nextjs-best-practices

## What it does

The skill embeds decision logic for the Next.js App Router into Claude Code sessions. It directs the model to treat Server Components as the default, moving interactivity to small client components only when React hooks or event handlers appear. Guidelines also cover route handlers with Zod schema validation and Server Actions for form submissions.

Caching rules outline build-time generation, time-based ISR, and request-level bypassing via `no-store`. To review and update your files, the skill requests access to `Read`, `Write`, `Edit`, `Glob`, and `Grep`.

Leaving an agent to guess component boundaries usually leads to placing `'use client'` on top-level pages, bloating client JavaScript bundles.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/nextjs-best-practices
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill nextjs-best-practices -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/nextjs-best-practices/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/nextjs-best-practices/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/nextjs-best-practices/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/nextjs-best-practices/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates nextjs-best-practices
```

2. **Manually: put the files in place**
- File: `.github/skills/nextjs-best-practices/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/nextjs-best-practices
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/nextjs-best-practices/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/nextjs-best-practices

## When to use it
- split Server and Client components using a decision tree
- configure fetch caching strategies and revalidation intervals
- structure route folders with route groups and parallel slots
- validate API route handler inputs using Zod

## Example prompts
- Structure a dashboard route in App Router and isolate interactive buttons into client components
- Create an API route handler to update products with Zod payload validation
- Configure data fetching with on-demand tag revalidation for the catalog page

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md