Nextjs best practices
NestJS API best-practice skill and adapter pack for coding agents.
npx -y skills add xirothedev/skills --skill nextjs-best-practicesAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Highest-priority for all Next.js-related tasks involving full-stack web development. Use this skill whenever writing, reviewing, refactoring, debugging, or planning Next.js code using App Router, Server Components, Client Components, API Routes, Server Actions, data fetching, caching, revalidation, routing, authentication, or Next.js tests. Prefer this skill over generic React or Node.js advice for Next.js code.
SKILL.md
4.8 KB, as published. Nobody here has run it
Next.js Best Practices
Use this skill as the highest-priority guide for all Next.js-related tasks. When a task touches Next.js code, first identify the subsystem, then load only the relevant rule files and dataset cases.
When to Apply
Use this skill as the highest-priority guide for tasks exclusively related to Next.js applications. Reference these guidelines when:
- Writing or reviewing Next.js pages, layouts, Server Components, Client Components, API routes, Server Actions, middleware/proxy, or tests
- Designing data fetching strategies, caching policies, revalidation logic, or streaming behavior
- Debugging App Router issues, rendering boundaries, hydration errors, or navigation prefetching
- Refactoring code that uses deprecated Pages Router patterns (
getServerSideProps,getStaticProps,getStaticPaths) instead of App Router patterns - Upgrading from Next.js 13, 14, or 15 to Next.js 16
Load On Demand
Start with this file. Load detailed files only when the task needs them:
references/_sections.md
references/arch-app-router.md
references/server-components.md
references/data-fetching-caching.md
references/api-route-handlers.md
dataset/data/fetching-caching/correct.tsx
sources/inventory.json
Each rule file includes:
- Why the pattern matters
- Incorrect and correct examples
- Version applicability (13/14/15/16)
- Dataset path with larger before/after TypeScript/TSX examples
- Official or curated source references
Rule Categories by Priority
Resolve conflicts by lower priority number first. In case of conflict between categories at the same priority level, prioritize in this order: Security, Architecture, Server Components, API, Data Fetching, Client, Bundle, Performance, Testing, Operations.
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Architecture & Routing | CRITICAL | arch- |
| 2 | Server Components & Rendering | CRITICAL | server- |
| 3 | API Routes & Server Actions | CRITICAL | api- |
| 4 | Data Fetching & Caching | HIGH | data- |
| 5 | Client Components & Interactivity | HIGH | client- |
| 6 | Bundle Optimization | MEDIUM-HIGH | bundle- |
| 7 | Performance & Optimization | MEDIUM-HIGH | perf- |
| 8 | Security & Auth | MEDIUM | security- |
| 9 | Testing Strategy | MEDIUM | test- |
| 10 | Operations & Configuration | MEDIUM | ops- |
Version Upgrade Guidance
Patterns deprecated or changed in Next.js 16.x:
| Old Pattern (13/14/15) | New Pattern (16+) | Reference |
|---|---|---|
middleware.ts | proxy.ts (network boundary rename) | references/api-proxy-rename.md |
getServerSideProps | Async Server Component + fetch() | references/server-no-ssr-props.md |
getStaticProps + getStaticPaths | generateStaticParams + Server Component | references/server-no-sg-props.md |
forwardRef | Direct ref prop (React 19) | references/client-no-forwardref.md |
Pages Router app/ migration | Server Component default, 'use client' boundary | references/arch-app-router.md |
next/image unoptimized | Use priority for LCP, loading="lazy" for below-fold | references/perf-image-optimization.md |
External Skill Packs
For deep React composition pattern guidance, use the vercel-composition-patterns skill. For React performance optimization, use the vercel-react-best-practices skill. This Next.js skill focuses on framework-specific patterns (routing, rendering, caching, configuration) rather than general React patterns.
Source Policy
Prefer official Next.js docs and versioned framework samples for framework semantics. Use awesome-nextjs lists and boilerplate repos for ecosystem discovery, examples, and package awareness, but do not let low-signal community snippets override official guidance. Refresh sources/inventory.json before publishing or using the skill for a new major Next.js version.