Nextjs16 Skills

Name: Nextjs16 Skills
Author: gocallum

gocallum/nextjs16-agent-skills

589 installs
22 repo stars
Updated January 21, 2026
gocallum/nextjs16-agent-skills

nextjs16-skills is a Claude Code skill that applies Next.js 16 conventions, App Router patterns, and agent-friendly implementation guidance while building or refactoring a modern React web application.

About

nextjs16-skills is a Claude skill from gocallum/nextjs16-agent-skills that centralizes Next.js 16 facts, upgrade commands, and troubleshooting guidance for agent-assisted development. It links to official docs, the v16 upgrade guide, and release notes, and documents automated migration via npx @next/codemod@canary upgrade latest plus manual npm install next@latest steps. Codemod coverage includes Turbopack config moves, next lint to ESLint CLI migration, middleware to proxy migration, and removal of some unstable_ prefixes. Developers reach for nextjs16-skills when planning a v16 upgrade, scaffolding with create-next-app@latest, or debugging App Router changes during active React web app builds.

Focused on Next.js 16 agent workflows for solo builders using GitHub-hosted skill definitions
Pairs with Claude Code, Cursor, and Codex-style agents implementing App Router projects
Catalog skill from gocallum/nextjs16-agent-skills for repeatable framework-aligned codegen
Use when upgrading or greenfielding Next 16 instead of mixing outdated Pages Router assumptions

Nextjs16 Skills by the numbers

589 all-time installs (skills.sh)
Ranked #578 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Jul 24, 2026 (Skillselion catalog sync)

npx skills add https://github.com/gocallum/nextjs16-agent-skills --skill nextjs16-skills

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/gocallum/nextjs16-agent-skills/nextjs16-skills.svg)](https://skillselion.com/skills/gocallum/nextjs16-agent-skills/nextjs16-skills)

Installs	589
repo stars	★ 22
Last updated	January 21, 2026
Repository	gocallum/nextjs16-agent-skills ↗

How do you upgrade a Next.js app to version 16?

Apply Next.js 16 conventions, App Router patterns, and agent-friendly implementation guidance while building or refactoring a modern React web app.

Who is it for?

React developers upgrading existing App Router projects to Next.js 16 or building new apps with current v16 conventions and codemods.

Skip if: Legacy Pages Router-only codebases with no App Router migration plan or teams staying on Next.js 15 without v16 breaking changes.

When should I use this skill?

A developer is upgrading to Next.js 16, creating a new App Router project, or debugging v16 breaking changes like middleware-to-proxy migration.

What you get

Next.js 16-compliant App Router code, migrated middleware/proxy config, updated ESLint setup, and Turbopack-aligned project configuration.

Upgraded Next.js 16 project config
App Router implementation guidance
Migration command reference

Files

SKILL.MDMarkdownGitHub ↗

Upgrade

# Automated upgrade
npx @next/codemod@canary upgrade latest

# Manual upgrade
npm install next@latest react@latest react-dom@latest

# New project
npx create-next-app@latest

Codemod covers (high-level): moves Turbopack config, migrates next lint → ESLint CLI, migrates middleware → proxy, removes some unstable_ prefixes, removes route-level experimental_ppr.

TypeScript: also upgrade @types/react and @types/react-dom.

What’s New (v16)

Cache Components: opt-in caching via the "use cache" directive; evolves/absorbs PPR.
Next.js DevTools MCP: Model Context Protocol integration for AI-assisted debugging.
proxy.ts: clearer network boundary; middleware.ts deprecated for most use.
Better logs/metrics: more detailed next dev and build timing output.

Performance / DX

Turbopack: stable; default bundler (opt out with next dev --webpack, next build --webpack).
If you have a custom webpack config, next build may fail (to prevent misconfiguration). Fix by migrating config, using next build --webpack, or using Turbopack and removing/ignoring the webpack config.
Turbopack config moved: experimental.turbopack → top-level turbopack in next.config.*.
Turbopack migration gotchas:
Sass imports: remove the Webpack-only ~ prefix (e.g. @import 'bootstrap/...';).
Browser bundles must not import Node built-ins (e.g. fs). If unavoidable, use turbopack.resolveAlias as a stopgap.
Turbopack filesystem cache (dev, beta): experimental.turbopackFileSystemCacheForDev: true.
React Compiler support: stable opt-in via reactCompiler: true (expect higher build/compile cost).
Build Adapters API: alpha (custom build adapters).
Routing/prefetching rewrite: layout deduplication + incremental prefetching.

Caching APIs (key signatures)

revalidateTag(tag, profile) now requires a cacheLife profile (or { expire }) for SWR behavior.
updateTag(tag) (Server Actions only): read-your-writes semantics.
refresh() (Server Actions only): refresh uncached data; does not mutate cache.
cacheLife and cacheTag are stable (no unstable_ prefix).

Requirements (v16)

Node.js: 20.9+ (Node 18 not supported)
TypeScript: 5.1+
Browsers: Chrome/Edge/Firefox 111+, Safari 16.4+

Breaking / Behavior Changes (high-impact)

Async Request APIs: sync access removed. Use await params, await searchParams, await cookies(), await headers(), await draftMode().
Tip (TypeScript): npx next typegen can generate helpers like PageProps, LayoutProps, RouteContext to migrate params/searchParams types safely.
Metadata images: opengraph-image, twitter-image, icon, apple-icon now receive params (and id) as Promises in the image function.
Sitemaps: sitemap({ id }) now receives id as a Promise when using generateSitemaps.
Parallel routes: slots require explicit default.js.
next/image defaults changed (cache TTL, sizes/qualities); local src with query strings requires images.localPatterns.

Other notable behavior changes:

next dev and next build use separate output dirs (next dev → .next/dev) and a lockfile prevents concurrent instances.
Scroll behavior: Next.js no longer overrides global scroll-behavior: smooth during navigations; add data-scroll-behavior="smooth" on <html> to restore the previous override behavior.
ESLint: @next/eslint-plugin-next defaults to ESLint Flat Config; legacy .eslintrc projects may need migration.

Removed / Deprecated (high-level)

Removed: AMP support; next lint (use ESLint/Biome directly); eslint option in next.config.*; serverRuntimeConfig/publicRuntimeConfig (use env vars); experimental.ppr + route-level experimental_ppr; unstable_rootParams.
Deprecated: middleware.ts filename (prefer proxy.ts); next/legacy/image; images.domains (prefer images.remotePatterns); revalidateTag(tag) single-arg form.
proxy.ts note: proxy runs on nodejs only; Edge runtime is not supported in proxy. Keep middleware.ts if you must stay on Edge.
Config rename example: skipMiddlewareUrlNormalize → skipProxyUrlNormalize.

Related skills

Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6k

Vercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k

ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k

Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72

Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4k

Image To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

How it compares

Use nextjs16-skills instead of generic React skills when the task specifically involves Next.js 16 upgrade codemods, App Router patterns, or v16 breaking changes.

FAQ

How does nextjs16-skills upgrade a project to Next.js 16?

nextjs16-skills documents running npx @next/codemod@canary upgrade latest for automated migration and npm install next@latest react@latest react-dom@latest for manual upgrades. Codemods handle Turbopack config, ESLint CLI, and middleware-to-proxy changes.

What breaking changes does nextjs16-skills cover?

nextjs16-skills covers high-level v16 migrations including Turbopack configuration moves, next lint to ESLint CLI, middleware renamed to proxy, and removal of some unstable_ prefixes. It links the official v16 upgrade guide for full details.

When should developers use nextjs16-skills?

Developers should use nextjs16-skills during Next.js 16 planning, upgrading, or troubleshooting App Router projects. The skill fits agent-assisted builds and refactors where v16 conventions must be applied consistently.

Frontend Developmentfrontend