
next-best-practices
Next.js App Router best practices covering file conventions, RSC boundaries, async APIs, data patterns, hydration errors, metadata, route handlers, image/font optimization, and bundling. Use when writing or reviewing Next.js code to prevent hydration errors, RSC violations, data waterfalls, and configuration mistakes.
- Installs
- 272
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill next-best-practices- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads next-best-practices automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Next.js review and implementation
Read the installed next version and relevant node_modules/next/dist/docs/
pages before changing framework behavior. Those docs and project configuration
take precedence; use a matching online version/source tag when local docs are
unavailable. Next.js publishes workflow skills in vercel/next.js skills/.
Docs are bundled from 16.2; in a monorepo, read the app's own next package.
The nextjs.org links in these files have local equivalents with numbered
folders, so search by file name (find node_modules/next/dist/docs -name proxy.md).
01-app/02-guides/upgrading/version-16.md lists the breaking changes.
Per-error pages (/docs/messages/*) are only online; the dev/build output
carries the error's fix options.
Exact exports are also in node_modules/next/{server,navigation,headers,cache}.d.ts.
Before other work, compare the installed version with Next.js security
advisories and tell the user when it is affected. As of 2026-10-22,
16.0.0–16.4.0 (fixed in 16.4.1) and 15.x up to 15.5.27 (fixed in 15.5.28) have
critical RCEs: use cache functions returning typed arrays
(GHSA-673q-mjm6-r5xr, 16.x only, no workaround) and self-hosted image
optimization of SVGs on glibc Linux (GHSA-2464-fhr4-w9xw; interim fix: sharp
0.35.5+). They also have a Server Actions DoS (GHSA-p3m5-59mp-jv5r). From 16.4,
experimental.agentUpgrade (default 'security') reminds during
next dev/next build; 16.3.x and older get no reminder.
Next.js 16 changes older examples miss
- Sync request access is removed:
cookies(),headers(),draftMode(),params(including image-metadata routes),searchParamsand sitemapidare promises.next typegengenerates globalPageProps<'/route'>,LayoutPropsandRouteContexttypes. middleware.tsis deprecated:proxy.tsexportingproxy(or default) runs on Node.js only and rejects aruntimeoption; code that needs Edge stays inmiddleware.ts. Codemod:npx @next/codemod@latest middleware-to-proxy ..- Turbopack is the default for
devandbuild; a customwebpackconfig fails the build unless--webpackkeeps it or explicit--turbopackignores it.next lintis removed andnext buildno longer lints.serverRuntimeConfig/publicRuntimeConfigare removed. - Every parallel-route slot needs
default.tsx, or the build fails. next/image:priorityis deprecated forpreload;qualitiesdefaults to[75](otherqualityvalues are coerced); localsrcwith a query string needsimages.localPatterns;images.domainsis deprecated forremotePatterns.revalidateTag(tag)is deprecated; pass a profile such as'max'or{ expire: 0 }for immediate expiry.updateTagandrefreshare Server Action-only. Caching details:cache-components.
The params and proxy shapes, checked against next 16.3.8 (next typegen,
tsc --noEmit, next build):
// app/blog/[slug]/page.tsx; PageProps is global after `next typegen` (or dev/build)
export async function generateStaticParams() {
return [{ slug: 'hello' }] // cacheComponents: needed for this top-level await; never []
}
export default async function Page({ params }: PageProps<'/blog/[slug]'>) {
const { slug } = await params // a Promise; sync access was removed in 16
return <h1>{slug}</h1>
}
// proxy.ts, replacing middleware.ts: Node.js runtime, no `runtime` export
import { NextResponse, type NextRequest } from 'next/server'
export function proxy(request: NextRequest) {
// Optimistic check only: authorize again where the data is read.
if (request.cookies.has('session')) return NextResponse.next()
return NextResponse.redirect(new URL('/login', request.url))
}
export const config = { matcher: ['/dashboard/:path*'] }
The upgrade codemod does not migrate synchronous request-API access; run
next-async-request-api separately when migrating that code. Use the project's
package runner and review the resulting types and runtime behavior.
For an authorized upgrade, npx next@canary upgrade [app-dir] --agent=security
(or =latest; experimental, documented from 16.4 in the installed
02-guides/upgrading/agent-upgrade.md) selects the target and prints its guides,
codemods and checks for the current agent; plain next upgrade runs the
interactive codemods.
Review the actual failure or feature, rather than applying every optimization. Keep the project's router, caching mode, runtime and package manager unless migration is requested.
Read for the affected area
| Area | Local reference |
|---|---|
| Route files, groups, proxy | File conventions |
| Server/client imports and props | RSC boundaries, directives |
| Params and request APIs | Async APIs, functions |
| Reads, mutations and APIs | Data patterns, Route Handlers |
| Rendering and failures | Suspense, hydration, errors |
| Metadata and public discovery | Metadata; nextjs-seo for an SEO audit |
| Assets and loading | Images, fonts, scripts |
| Package/runtime behavior | Bundling, runtime |
| Navigation slots/modals | Parallel routes |
| Deployment/debugging | Self-hosting, diagnostics |
Use cache-components when that mode is enabled and relevant to the task.
Tag invalidation can also operate on fetch caches outside that mode.
Validate with the project's lint/typecheck scripts and a production build,
then exercise the changed route under next start. A dev render can
hide prerender/Suspense issues; a build cannot prove authorization, hydration,
freshness or cross-instance behavior. Report what was actually exercised.
FAQ
What does the next-best-practices skill do?
Next.js App Router best practices covering file conventions, RSC boundaries, async APIs, data patterns, hydration errors, metadata, route handlers, image/font optimization, and bundling. Use when writing or reviewing Next.js code to prevent hydration errors, RSC violations, data waterfalls, and configuration mistakes.
How do I install next-best-practices?
Run npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill next-best-practices in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/next-best-practices/ (personal) or .claude/skills/next-best-practices/ (project).
Which AI agents can use next-best-practices?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is next-best-practices safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains next-best-practices?
It is published by laguagu in laguagu/claude-code-nextjs-skills. It has 272 recorded installs.
More from laguagu/claude-code-nextjs-skills
nextjs-seo
laguagu/claude-code-nextjs-skills
Next.js App Router SEO implementation and audits. Use for metadata and social images, sitemap/robots, canonicals and localization, structured data, Core Web Vitals evidence, AI crawler policy or search-indexing diagnosis. Not for general Next.js feature work unrelated to SEO.
openai-agents-sdk
laguagu/claude-code-nextjs-skills
OpenAI Agents SDK (Python) development. Use when building AI agents, multi-agent handoffs, function tools, guardrails, sessions, streaming, or tracing with the openai-agents / agents Python package — including Azure OpenAI through its native client or LiteLLM. Triggers on imports from agents, uses of Runner.runsync/Runner.runstreamed, @functiontool, AgentOutputSchema, SQLiteSession, or questions about the openai-agents-python SDK. Python only — not the TypeScript @openai/agents SDK.
nextjs-shadcn
laguagu/claude-code-nextjs-skills
Builds distinctive Next.js interfaces with shadcn/ui, choosing typography, styling and purposeful visual effects for the product. Use when creating or polishing a Next.js + shadcn app, page or component, including themes, presets, backgrounds and design-system lint. Uses frontend-design for substantial visual direction and icons for asset sourcing.
react-best-practices
laguagu/claude-code-nextjs-skills
React and Next.js performance optimization guide from Vercel Engineering (70 rules in 8 categories). Use when writing, reviewing, or refactoring React/Next.js code to eliminate waterfalls, reduce bundle size, prevent re-renders, optimize Server Components, or fix performance bottlenecks. Triggers on data fetching, Promise.all, Suspense, useMemo, dynamic imports, bundle analysis, code-splitting, and rendering performance tasks.
postgres-semantic-search
laguagu/claude-code-nextjs-skills
Open the skill to read its SKILL.md instructions.
cache-components
laguagu/claude-code-nextjs-skills
Open the skill to read its SKILL.md instructions.
Popular code quality & workflow skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
improve-codebase-architecture
mattpocock/skills
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
handoff
mattpocock/skills
Compact the current conversation into a handoff document for another agent to pick up.
domain-modeling
mattpocock/skills
Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.
diagnosing-bugs
mattpocock/skills
Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.