SkillsAdd

xirothedev/skills · Archived

nextjs-best-practices

Highest-priority for all Next.js-related tasks involving full-stack web development.

First seen May 30, 2026

Installation

$ npx skills add xirothedev/skills --skill nextjs-best-practices
View on skills.sh ↗ GitHub repository ↗

Summary

  • 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.

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

nextjs-secure-bff Same source · more installs
xirothedev/skills

Use for security-sensitive Next.js backend-for-frontend work involving Route Handlers, Proxy, S…

26 installs
nextjs-nestjs-integration Same source · more installs
xirothedev/skills

Use for real projects that combine a Next.js frontend/BFF with a NestJS API.

26 installs
nestjs-best-practices Same source · more installs
xirothedev/skills

Highest-priority for all NestJS-related tasks involving API engineering.

26 installs
nextjs-production-platform Same source
xirothedev/skills

Use for production Next.js platform work involving Docker or standalone output, static export t…

24 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

supabase Shared topics
supabase/agent-skills

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge F…

263K installs
vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
ai-sdk Shared topics
vercel/ai 53.4K installs
agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
azure-aigateway Shared topics
microsoft/azure-skills

Configure Azure API Management as an AI Gateway for AI models, MCP tools, and agents. WHEN: sem…

566.3K installs
azure-compute Shared topics
microsoft/azure-skills

Azure VM/VMSS router. WHEN: create / provision / deploy / spin-up VM, recommend VM size, compar…

510K installs

Also in this package

Other skills from xirothedev/skills.

npx skills add xirothedev/skills
nextjs-secure-bff 26 nextjs-nestjs-integration 26 nestjs-best-practices 26 nextjs-production-platform 24 nextjs-cache-components-runtime 24

Browse all from xirothedev/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 2
Default branch main
Open issues 0
Status Archived

Skill metadata

Parsed from SKILL.md frontmatter.

Version0.1.0
More metadata
author
xiro
version
0.1.0
organization
local
date
May 2026
framework
Next.js
frameworkVersion
v16.1.6
supportedVersions
["14.x.x","15.x.x","16.x.x"]
priority
highest
abstract
Concise navigation skill for Next.js full-stack best practices. Detailed rules and concrete before/after TypeScript/TSX examples are stored in references and dataset files for load-on-demand use by coding agents. Includes upgrade guidance from Next.js 13/14/15 to 16.x.

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 4,914 B
  • docs AGENTS.md 7,279 B
  • docs SUMMARY.md 444 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 24 installs

SKILL.md

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.