メニュー
Key facts and links for Next.js 16. Use for planning, writing, and troubleshooting Next.js 16 changes.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Clerk authentication for Next.js 16 (App Router only) with proxy.ts setup, migration from middleware.ts, environment configuration, and MCP server integration.
Integrate Resend email service via MCP protocol for AI agents to send emails with Claude Desktop, GitHub Copilot, and Cursor. Set up transactional and marketing emails, configure sender verification, and use AI to automate email workflows.
AI SDK 6 Beta overview, agents, tool approval, Groq (Llama), and Vercel AI Gateway. Key breaking changes from v5 and new patterns.
Auth.js v5 setup for Next.js authentication including Google OAuth, credentials provider, environment configuration, and core API integration
Pattern for building MCP servers in Next.js with mcp-handler, shared Zod schemas, and reusable server actions.
Key facts and breaking changes for upgrading to Prisma ORM 7. Consider version 7 changes before generation or troubleshooting
| name | nextjs16-skills |
| description | Key facts and links for Next.js 16. Use for planning, writing, and troubleshooting Next.js 16 changes. |
# 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.
"use cache" directive; evolves/absorbs PPR.proxy.ts: clearer network boundary; middleware.ts deprecated for most use.next dev and build timing output.next dev --webpack, next build --webpack).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.experimental.turbopack → top-level turbopack in next.config.*.~ prefix (e.g. @import 'bootstrap/...';).fs). If unavoidable, use turbopack.resolveAlias as a stopgap.experimental.turbopackFileSystemCacheForDev: true.reactCompiler: true (expect higher build/compile cost).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).await params, await searchParams, await cookies(), await headers(), await draftMode().npx next typegen can generate helpers like PageProps, LayoutProps, RouteContext to migrate params/searchParams types safely.opengraph-image, twitter-image, icon, apple-icon now receive params (and id) as Promises in the image function.sitemap({ id }) now receives id as a Promise when using generateSitemaps.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: smooth during navigations; add data-scroll-behavior="smooth" on <html> to restore the previous override behavior.@next/eslint-plugin-next defaults to ESLint Flat Config; legacy .eslintrc projects may need migration.next lint (use ESLint/Biome directly); eslint option in next.config.*; serverRuntimeConfig/publicRuntimeConfig (use env vars); experimental.ppr + route-level experimental_ppr; unstable_rootParams.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.skipMiddlewareUrlNormalize → skipProxyUrlNormalize.