nextjs16-skills_skill

Overview

This skill provides a concise cheat sheet for Next.js 16—key changes, upgrade commands, breaking behaviors, and migration tips. Use it to plan upgrades, write migration guides, and troubleshoot issues when moving projects to Next.js 16. It focuses on practical actions, compatibility requirements, and notable API changes that impact builds, routing, and caching.

How this skill works

It summarizes official upgrade steps and codemod usage, lists major new features (Turbopack, Cache Components, proxy.ts, DevTools MCP), and highlights performance and DX impacts. It calls out breaking changes, removed/deprecated features, and the exact Node/TypeScript/browser requirements you must meet. The skill also captures important API signature changes for caching and server actions to help update application code.

When to use it

• Preparing a migration plan from Next.js 15 or earlier to Next.js 16
• Troubleshooting build failures after enabling Turbopack or upgrading dependencies
• Auditing code for deprecated middleware, unstable flags, and removed features
• Updating server and client code to new async request APIs and caching signatures
• Writing developer docs or upgrade guides for your team

Best practices

• Run the codemod first: npx @next/codemod@canary upgrade latest, then verify changes
• Test with Turbopack as default, but use --webpack temporarily if you need old webpack behavior
• Upgrade Node to 20.9+ and TypeScript to 5.1+ before migrating
• Replace middleware.ts with proxy.ts for Node-only proxies, keep middleware if Edge runtime is required
• Use npx next typegen to generate PageProps/LayoutProps types and simplify async param migration
• Treat revalidateTag/updateTag/refresh semantics as part of server actions and update calls accordingly

Example use cases

• Automated codemod run to migrate experimental config and unstable prefixes before manual fixes
• Fixing a build error caused by a custom webpack config by either migrating or using --webpack
• Adjusting caching calls to the new revalidateTag(tag, profile) signature with cacheLife or { expire }
• Switching image config to remotePatterns and updating next/image defaults to match new TTLs
• Converting middleware routes to proxy.ts when Edge runtime is not required