← ClaudeAtlas

dhpk-nextjs-16-noteslisted

Use when working on Next.js 16 framework code or 15→16 upgrades: Turbopack, async Request APIs, Node floor, removed APIs, and image changes. Not for application business logic. React 18.2+ or 19 is supported; pair with `dhpk-react-18-notes` or `dhpk-react-19-notes` for React-language guidance and `dhpk-nextjs-15-5-notes` for the upgrade source. Output: migration traps and verification gates.
hmj1026/dhpk · ★ 2 · Web & Frontend · score 71
Install: claude install-skill hmj1026/dhpk
# Next.js 16 — current stable major Current stable major of Next.js, now at 16.2.x. > Read `docs/agent-guidance/frontend-framework-routing.md` for React/Next > family selection and compatibility. This module owns the Next.js 16 > version floors and migration traps after routing. --- ## Signature features ### Turbopack by default Turbopack is the default bundler for both `next dev` and `next build` in 16 — no `--turbopack` flag needed anymore, and its absence no longer means webpack. Opt out with `--webpack`: ```json { "scripts": { "dev": "next dev", "build": "next build" } } ``` ```bash next build --webpack # opt out of Turbopack ``` ### `next upgrade` CLI Added in 16.1.0 — an automated upgrade helper: ```bash next upgrade ``` The general codemod runner still applies for broader migrations: ```bash npx @next/codemod@canary upgrade latest ``` --- ## Migration traps Ordered by blocker severity, most severe first. ### 1. Async-only Request APIs (the biggest code-level break) `params`, `searchParams`, `cookies`, `headers`, and `draftMode` are now **async-only** (Promises). The temporary synchronous compatibility shim from v15 is fully removed in 16. Code written against 14-era synchronous props hits this first: ```tsx // 14-era — no longer works export default function Page({ params }: { params: { id: string } }) { return <div>{params.id}</div> } // 16 — async-only export default async function Page({ params, }: { params: Promise<{ id: stri