const{Fragment:e,jsx:n,jsxs:r}=arguments[0];function _createMdxContent(t){const c={a:"a",code:"code",h2:"h2",h3:"h3",input:"input",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...t.components},{ArticleSection:i,BlogCTA:d}=c;return i||_missingMdxReference("ArticleSection",!0),d||_missingMdxReference("BlogCTA",!0),r(e,{children:[r(c.p,{children:["Next.js 16は、2025年秋にリリースされた大型バージョンです。Turbopackのデフォルト化、",n(c.code,{children:"middleware.ts"}),"から",n(c.code,{children:"proxy.ts"}),"へのリネーム、React 19の完全サポートなど、開発体験とパフォーマンスの両面で重要な変更が加わりました。"]}),"\n",n(c.p,{children:"本記事では、実際のプロジェクトに影響する変更点を優先度順に解説します。"}),"\n",r(i,{variant:"overview",children:[n(c.h2,{id:"この記事を読むとわかること",children:n(c.a,{href:"#この記事を読むとわかること",children:"この記事を読むとわかること"})}),r(c.ul,{children:["\n",n(c.li,{children:"Turbopackデフォルト化で何が変わるか（数値付き）"}),"\n",r(c.li,{children:[n(c.code,{children:"proxy.ts"}),"への移行が必要かどうかの判断基準"]}),"\n",n(c.li,{children:"React 19対応で恩恵を受けるコードパターン"}),"\n",n(c.li,{children:"Partial Prerendering（PPR）が安定版になった意味"}),"\n",r(c.li,{children:[n(c.code,{children:"after()"})," APIの実用的な使い方"]}),"\n"]})]}),"\n",n(c.h2,{id:"1-turbopackがデフォルトバンドラーに",children:n(c.a,{href:"#1-turbopackがデフォルトバンドラーに",children:"1. Turbopackがデフォルトバンドラーに"})}),"\n",r(c.p,{children:["Next.js 16最大の変更点は、",n(c.strong,{children:"Turbopackがデフォルトのバンドラーになったこと"}),"です。Next.js 15では",n(c.code,{children:"--turbopack"}),"フラグを明示的に指定する必要がありましたが、16からはフラグなしで自動的にTurbopackが使われます。"]}),"\n",n(c.pre,{children:n(c.code,{className:"language-bash",children:"# Next.js 15まで（Turbopackを使うには明示的に指定）\nnext dev --turbopack\n\n# Next.js 16（フラグ不要）\nnext dev\n"})}),"\n",n(c.h3,{id:"ビルド速度の改善幅",children:n(c.a,{href:"#ビルド速度の改善幅",children:"ビルド速度の改善幅"})}),"\n",n(c.p,{children:"Vercelの公式ベンチマークでは、大規模プロジェクト（1,000コンポーネント以上）において以下の改善が報告されています。"}),"\n",r(c.table,{children:[n(c.thead,{children:r(c.tr,{children:[n(c.th,{children:"指標"}),n(c.th,{children:"webpack"}),n(c.th,{children:"Turbopack"})]})}),r(c.tbody,{children:[r(c.tr,{children:[n(c.td,{children:"初回コールドスタート"}),n(c.td,{children:"〜30秒"}),n(c.td,{children:"〜8秒"})]}),r(c.tr,{children:[n(c.td,{children:"HMR（ファイル保存後の反映）"}),n(c.td,{children:"〜2秒"}),n(c.td,{children:"〜200ms"})]}),r(c.tr,{children:[n(c.td,{children:"本番ビルド"}),n(c.td,{children:"〜3分"}),n(c.td,{children:"〜90秒"})]})]})]}),"\n",n(c.p,{children:"HMRの高速化は体感として最もわかりやすく、スタイル変更やコンポーネント修正がほぼ即座にブラウザに反映されるようになります。"}),"\n",n(c.h3,{id:"webpack設定の移行",children:n(c.a,{href:"#webpack設定の移行",children:"webpack設定の移行"})}),"\n",r(c.p,{children:["Turbopackはwebpackのプラグインシステムと互換性がないため、",n(c.code,{children:"next.config.js"}),"でwebpack固有の設定をしている場合は確認が必要です。"]}),"\n",n(c.pre,{children:n(c.code,{className:"language-js",children:"// next.config.js\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n // webpack設定がある場合はTurbopack用の設定に書き換えが必要\n turbopack: {\n rules: {\n '*.svg': {\n loaders: ['@svgr/webpack'],\n as: '*.js',\n },\n },\n },\n};\n"})}),"\n",r(c.p,{children:["多くのプロジェクトではwebpack設定を使っていないため、設定ファイルを変更せずにそのまま動作します。",n(c.code,{children:"next dev"}),"を実行してエラーが出なければ追加対応は不要です。"]}),"\n",n(c.h2,{id:"2-middlewarets--proxyts-へのリネーム",children:r(c.a,{href:"#2-middlewarets--proxyts-へのリネーム",children:["2. ",n(c.code,{children:"middleware.ts"})," → ",n(c.code,{children:"proxy.ts"})," へのリネーム"]})}),"\n",r(c.p,{children:["Next.js 16では、",n(c.code,{children:"middleware.ts"}),"が",n(c.code,{children:"proxy.ts"}),"にリネームされました。機能は完全に同一ですが、ファイル名が「プロキシとして動作する」という役割をより正確に表現するものに変更されています。"]}),"\n",n(c.h3,{id:"移行方法",children:n(c.a,{href:"#移行方法",children:"移行方法"})}),"\n",n(c.pre,{children:n(c.code,{className:"language-bash",children:"# ファイル名を変更するだけ\nmv middleware.ts proxy.ts\nmv middleware.js proxy.js\n"})}),"\n",n(c.p,{children:"エクスポートするオブジェクト名も変更されています。"}),"\n",n(c.pre,{children:n(c.code,{className:"language-ts",children:"// Before（middleware.ts）\nexport function middleware(request: NextRequest) {\n // ...\n}\nexport const config = {\n matcher: ['/api/:path*'],\n};\n\n// After（proxy.ts）\nexport function proxy(request: NextRequest) {\n // ...\n}\nexport const config = {\n matcher: ['/api/:path*'],\n};\n"})}),"\n",r(c.p,{children:[n(c.code,{children:"middleware.ts"}),"は後方互換として当面サポートされますが、Next.js 17で廃止予定のため、新規プロジェクトでは",n(c.code,{children:"proxy.ts"}),"を使うことが推奨されています。"]}),"\n",n(c.h3,{id:"既存プロジェクトの対応タイミング",children:n(c.a,{href:"#既存プロジェクトの対応タイミング",children:"既存プロジェクトの対応タイミング"})}),"\n",r(c.ul,{children:["\n",r(c.li,{children:[n(c.strong,{children:"新規プロジェクト"})," ── 最初から",n(c.code,{children:"proxy.ts"}),"を使う"]}),"\n",r(c.li,{children:[n(c.strong,{children:"既存プロジェクト"})," ── 次の機能開発タイミングで移行（緊急性は低い）"]}),"\n",r(c.li,{children:[n(c.strong,{children:"マイクロフロントエンド"})," ── 本番デプロイ前に確認推奨"]}),"\n"]}),"\n",n(c.h2,{id:"3-react-19-完全サポート",children:n(c.a,{href:"#3-react-19-完全サポート",children:"3. React 19 完全サポート"})}),"\n",n(c.p,{children:"Next.js 16はReact 19を完全にサポートします。特に実用的な変更点を3つ紹介します。"}),"\n",n(c.h3,{id:"server-actionsの改善",children:n(c.a,{href:"#server-actionsの改善",children:"Server Actionsの改善"})}),"\n",r(c.p,{children:["React 19では",n(c.code,{children:"useActionState"}),"（旧",n(c.code,{children:"useFormState"}),"）が安定版になりました。フォーム送信のパターンが整理され、より直感的に書けます。"]}),"\n",n(c.pre,{children:n(c.code,{className:"language-tsx",children:"// app/actions.ts\n'use server';\n\nexport async function submitForm(prevState: unknown, formData: FormData) {\n const name = formData.get('name') as string;\n\n if (!name) {\n return { error: '名前を入力してください' };\n }\n\n await saveToDatabase(name);\n return { success: true };\n}\n\n// app/form.tsx\n'use client';\n\nimport { useActionState } from 'react';\nimport { submitForm } from './actions';\n\nexport function Form() {\n const [state, formAction, isPending] = useActionState(submitForm, null);\n\n return (\n \n );\n}\n"})}),"\n",n(c.h3,{id:"use-フックの活用",children:r(c.a,{href:"#use-フックの活用",children:[n(c.code,{children:"use()"})," フックの活用"]})}),"\n",r(c.p,{children:["React 19で安定化した",n(c.code,{children:"use()"}),"フックを使うと、Promiseをコンポーネント内で直接処理できます。"]}),"\n",n(c.pre,{children:n(c.code,{className:"language-tsx",children:"import { use, Suspense } from 'react';\n\nasync function fetchUser(id: string) {\n const res = await fetch(`/api/users/${id}`);\n return res.json();\n}\n\nfunction UserProfile({ userPromise }: { userPromise: Promise }) {\n const user = use(userPromise); // Promiseを直接渡す\n return

{user.name}

;\n}\n\nexport default function Page({ params }: { params: { id: string } }) {\n const userPromise = fetchUser(params.id);\n\n return (\n 読み込み中...}>\n \n \n );\n}\n"})}),"\n",n(c.h3,{id:"context-の簡略化",children:n(c.a,{href:"#context-の簡略化",children:"Context の簡略化"})}),"\n",r(c.p,{children:["React 19から",n(c.code,{children:"Context.Provider"}),"の代わりに",n(c.code,{children:"Context"}),"を直接JSXとして使えます。"]}),"\n",n(c.pre,{children:n(c.code,{className:"language-tsx",children:"// Before\n\n \n\n\n// After（React 19）\n\n \n\n"})}),"\n",n(c.h2,{id:"4-partial-prerenderingpprの安定化",children:n(c.a,{href:"#4-partial-prerenderingpprの安定化",children:"4. Partial Prerendering（PPR）の安定化"})}),"\n",n(c.p,{children:"Next.js 14から実験的機能として提供されていた**Partial Prerendering（PPR）**が、Next.js 16で安定版になりました。"}),"\n",n(c.h3,{id:"pprとは何か",children:n(c.a,{href:"#pprとは何か",children:"PPRとは何か"})}),"\n",r(c.p,{children:["PPRは、",n(c.strong,{children:"同一のページ内でStaticな部分とDynamicな部分を混在させる"}),"レンダリング方式です。"]}),"\n",n(c.pre,{children:n(c.code,{children:"┌─────────────────────────────────────┐\n│ ヘッダー（Static）← 即座に表示 │\n├─────────────────────────────────────┤\n│ 商品一覧（Static）← 即座に表示 │\n├─────────────────────────────────────┤\n│ [カート数] （Dynamic）← ストリーミング│\n└─────────────────────────────────────┘\n"})}),"\n",n(c.p,{children:"従来のNext.jsでは、ページ内に1つでもDynamicな部分があると、ページ全体がSSR（サーバーレンダリング）になりました。PPRではStaticな部分が先に配信され、Dynamicな部分は後からストリーミングされます。"}),"\n",n(c.h3,{id:"有効化と使い方",children:n(c.a,{href:"#有効化と使い方",children:"有効化と使い方"})}),"\n",n(c.pre,{children:n(c.code,{className:"language-js",children:"// next.config.js\nconst nextConfig = {\n experimental: {\n ppr: true, // Next.js 16では stable に移行\n },\n};\n"})}),"\n",n(c.pre,{children:n(c.code,{className:"language-tsx",children:"// app/products/page.tsx\nimport { Suspense } from 'react';\n\nexport default function ProductsPage() {\n return (\n <>\n

商品一覧

\n {/* Staticとして扱われる */}\n }>\n {/* Dynamicとしてストリーミング */}\n \n \n );\n}\n"})}),"\n",n(c.p,{children:"ECサイトや情報サイトのように「基本情報は静的、ユーザー固有情報は動的」というパターンで大きな恩恵を受けます。"}),"\n",n(c.h2,{id:"5-after-api-の正式サポート",children:r(c.a,{href:"#5-after-api-の正式サポート",children:["5. ",n(c.code,{children:"after()"})," API の正式サポート"]})}),"\n",r(c.p,{children:["Next.js 15.1で導入された",n(c.code,{children:"after()"}),"APIがNext.js 16で安定版になりました。これは、",n(c.strong,{children:"レスポンスを返した後に処理を行う"}),"ための仕組みです。"]}),"\n",n(c.h3,{id:"典型的なユースケース",children:n(c.a,{href:"#典型的なユースケース",children:"典型的なユースケース"})}),"\n",n(c.pre,{children:n(c.code,{className:"language-ts",children:"// app/api/purchase/route.ts\nimport { after } from 'next/server';\n\nexport async function POST(request: Request) {\n const { productId, userId } = await request.json();\n\n // 購入処理（レスポンス前に完了させる必要がある処理）\n const order = await createOrder(productId, userId);\n\n // レスポンスを返す\n const response = Response.json({ orderId: order.id });\n\n // after()内の処理はレスポンス送信後に実行される\n after(async () => {\n await sendOrderConfirmationEmail(userId, order.id);\n await updateInventory(productId);\n await logPurchaseEvent(userId, productId);\n });\n\n return response;\n}\n"})}),"\n",r(c.p,{children:[n(c.code,{children:"after()"}),"を使うことで、ユーザーへのレスポンスを遅らせることなく、ログ記録・メール送信・在庫更新などの後処理を行えます。"]}),"\n",n(c.h2,{id:"6-キャッシュ制御の改善",children:n(c.a,{href:"#6-キャッシュ制御の改善",children:"6. キャッシュ制御の改善"})}),"\n",r(c.p,{children:["Next.js 16では",n(c.code,{children:"cacheTag()"}),"と",n(c.code,{children:"cacheLife()"}),"が安定版になり、より細かいキャッシュ制御が可能になりました。"]}),"\n",n(c.pre,{children:n(c.code,{className:"language-ts",children:"// app/products/[id]/page.tsx\nimport { unstable_cacheTag as cacheTag, unstable_cacheLife as cacheLife } from 'next/cache';\n\nasync function getProduct(id: string) {\n 'use cache';\n cacheTag(`product-${id}`);\n cacheLife('hours'); // 1時間キャッシュ\n\n const res = await fetch(`https://api.example.com/products/${id}`);\n return res.json();\n}\n"})}),"\n",n(c.pre,{children:n(c.code,{className:"language-ts",children:"// app/api/products/[id]/route.ts\nimport { revalidateTag } from 'next/cache';\n\n// 商品情報が更新されたときに特定のキャッシュだけ無効化\nexport async function PUT(request: Request, { params }: { params: { id: string } }) {\n await updateProduct(params.id, await request.json());\n revalidateTag(`product-${params.id}`); // このタグのキャッシュのみ再検証\n return Response.json({ success: true });\n}\n"})}),"\n",n(c.h2,{id:"nextjs-16-へのアップグレード手順",children:n(c.a,{href:"#nextjs-16-へのアップグレード手順",children:"Next.js 16 へのアップグレード手順"})}),"\n",n(c.pre,{children:n(c.code,{className:"language-bash",children:"# パッケージのアップグレード\nnpm install next@16 react@19 react-dom@19\n\n# TypeScriptを使っている場合\nnpm install --save-dev @types/react@19 @types/react-dom@19\n"})}),"\n",n(c.h3,{id:"アップグレード後の確認チェックリスト",children:n(c.a,{href:"#アップグレード後の確認チェックリスト",children:"アップグレード後の確認チェックリスト"})}),"\n",r(c.ul,{className:"contains-task-list",children:["\n",r(c.li,{className:"task-list-item",children:[n(c.input,{type:"checkbox",disabled:!0})," ",n(c.code,{children:"next dev"})," が起動するか確認（Turbopackエラーの有無）"]}),"\n",r(c.li,{className:"task-list-item",children:[n(c.input,{type:"checkbox",disabled:!0})," ",n(c.code,{children:"middleware.ts"})," がある場合は動作確認（",n(c.code,{children:"proxy.ts"}),"への移行は任意）"]}),"\n",r(c.li,{className:"task-list-item",children:[n(c.input,{type:"checkbox",disabled:!0})," ",n(c.code,{children:"useFormState"})," を使っている場合は ",n(c.code,{children:"useActionState"})," への移行検討"]}),"\n",r(c.li,{className:"task-list-item",children:[n(c.input,{type:"checkbox",disabled:!0})," ",n(c.code,{children:"Context.Provider"})," の記法は引き続き動作するが、新記法への移行も検討"]}),"\n",r(c.li,{className:"task-list-item",children:[n(c.input,{type:"checkbox",disabled:!0})," ","本番ビルド（",n(c.code,{children:"next build"}),"）のエラーなし確認"]}),"\n"]}),"\n",n(c.h2,{id:"まとめ",children:n(c.a,{href:"#まとめ",children:"まとめ"})}),"\n",n(c.p,{children:"Next.js 16の変更をひと言でまとめると、**「実験的機能の卒業と開発体験の洗練」**です。"}),"\n",r(c.p,{children:["Turbopackのデフォルト化により開発中のHMRが劇的に速くなり、PPRや",n(c.code,{children:"after()"}),"の安定化により本番環境でのパフォーマンス最適化の選択肢が増えました。React 19との組み合わせで、Server Actionsを使ったフォーム処理もシンプルに書けるようになっています。"]}),"\n",r(c.p,{children:["破壊的変更は",n(c.code,{children:"proxy.ts"}),"のリネームのみで、移行の緊急性は低い。既存プロジェクトも",n(c.code,{children:"npm install next@16"}),"でほぼそのまま動作するため、アップグレードのハードルは低いバージョンです。"]}),"\n",n(d,{})]})}return{default:function(e={}){const{wrapper:r}=e.components||{};return r?n(r,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};function _missingMdxReference(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}

Tech