← ClaudeAtlas

nextjs-16-noteslisted

Next.js 16 (current stable major, now at 16.2.x) signature features and the breaking-change traps from 15.x -> 16.0. Use when writing or reviewing code in a Next.js 16 project, or planning an upgrade from Next.js 15.x. Covers Turbopack-by-default (dev and build), the async-only Request APIs (params/searchParams/cookies/headers), the Node.js 20.9+ floor, the removal of next lint and AMP, next/image priority -> preload, removed runtime-config APIs, and the 16.1 next upgrade CLI. Not for application business logic — load when working on framework-touching code or planning a 15.x -> 16 upgrade. Note: Next.js 16 supports React 18.2+ or 19 — React 19 is recommended but NOT required. Output: version-specific guidance, migration traps, and verification gates.
hmj1026/dhpk · ★ 2 · Web & Frontend · score 68
Install: claude install-skill hmj1026/dhpk
# Next.js 16 — current stable major Current stable major of Next.js, now at 16.2.x. > Version floors: **Node.js 20.9.0+** (Node 18 dropped), **TypeScript > 5.1.0+**, **React 18.2.0+ or 19**. React 19 is recommended and is > the default for new apps, but it is NOT required — a React 18.3.1 > app adopts Next.js 16 without a React major upgrade. For > React-language guidance, pair this cross-stack with the `react-18` > or `react-19` module. --- ## 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 }: {