Skip to main content
affpapa.org
RU EN
skill

nextjs-best-practices — Claude Code skill: what it does and setup

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

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/nextjs-best-practices
Open on GitHub

What nextjs-best-practices 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.

What it helps with

  • 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 for the agent

  • 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

How to install nextjs-best-practices

1claude-code-templates

npx claude-code-templates@latest --skill development/nextjs-best-practices

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill nextjs-best-practices -a claude-code

3Manually: put the files in place

~/.claude/skills/nextjs-best-practices/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/nextjs-best-practices/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about nextjs-best-practices

How to install nextjs-best-practices in Claude Code?

Run npx claude-code-templates@latest --skill development/nextjs-best-practices in your terminal. You can also run npx skills add davila7/claude-code-templates --skill nextjs-best-practices -a claude-code.

What does nextjs-best-practices do?

It teaches Claude Code core App Router patterns, including default Server Components, fetch caching strategies, and route organization rules.

Which tools does this skill allow Claude Code to run?

The skill frontmatter permits the agent to use Read, Write, Edit, Glob, and Grep on project files.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set495

The whole set →
academic-researcher Searches scholarly literature, checks source quality, and builds research reviews. Use it to compare study methods, trace citations, and identify gaps. 1,855installs generate-api-documentation Scans source code for endpoint annotations and builds API documentation. Supports Swagger UI, Redoc, Postman collections, and automated CI/CD steps. 1,849installs cli-ui-designer Designs terminal-styled web interfaces with modern web standards. Helpful when you want a dashboard, developer tool, or landing page that looks like a command line. 1,849installs feature The command creates a feature/<name> branch from develop and sets up remote tracking. Use it to start a feature with the Git Flow branch structure. 1,820installs software-architecture A skill that hands the agent coding rules: early returns, splitting long functions, domain names instead of utils. Useful when the agent writes or reviews project code. 1,769installs architecture-modernizer Plans service boundaries, event-driven flows, and target architecture for legacy systems. Use it when you need a concrete decomposition plan rather than a code-level refactor. 1,768installs lead-research-assistant Finds prospective B2B accounts by scanning your codebase or product pitch, scoring relevance and outlining initial outreach points. 1,754installs changelog-generator A subagent that turns git commits into a CHANGELOG.md and release notes, sorting changes by Conventional Commits. Handy right before you tag a version. 1,754installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor