메뉴
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.