Next.js 16.4：create-next-app で作るアプリは Cache Components が既定に

Next.js 16.4 から、npx create-next-app@latest で新しく作るアプリは、Cache Components（キャッシュ・コンポーネント）が最初から有効になります。Cache Components は、「ここはキャッシュしてよい」という所に自分で印を付ける、Next.js の新しい仕組みです。キャッシュとは、一度作った結果をとっておいて、次から使い回すことです。変わるのは新しく作るアプリだけです。既存のアプリは、16.4 に上げただけでは有効になりません（設定の既定値が false であることを、next 16.4.1 のソースで確かめました。文書の頁では見つかりませんでした）。

この記事は、これから create-next-app で Next.js のアプリを作る人に向けて、何が既定になったか、既存のアプリに効くか、Cache Components とは何か、オフにするにはどうするかを説明します。版や日付は2026年10月19日時点です。手元の記録は Next.js 16.4.1 で確かめたもので、macOS 14.4.1（arm64）・Node.js 21.7.1・npm 10.5.0 で流しました。

先に版の注意が2つあります。

16.4.0 は、2026年10月14日（米国の日付。日本時間では15日）に出た脆弱性の対象です。16.4.1 以上を使ってください。くわしくは React・Next.js の脆弱性にまとめています
2026年10月19日時点の最新は 16.4.2（10月15日に公開。米国の日付で、日本時間では16日）です。公開された変更の一覧に、セキュリティの項目は書かれていません。この記事では 16.4.2 では流していません

この記事でわかること

16.4 から、create-next-app の「おすすめの既定」で作ると Cache Components が最初から有効になること（設定は2つ）
既存のアプリには効かないこと（cacheComponents の既定値は false）と、使いたいときの足し方
Cache Components とは何か（「キャッシュするものを自分で選ぶ」考え方と、'use cache'・<Suspense>）
Cache Components をオフにする方法（作るとき・作ったあと）
作るときに出る警告（5 high severity vulnerabilities など）の中身と、要る Node.js の版

Next.js 16.4 で、create-next-app の何が変わった？
既存のアプリにも効く？
1. 既存のアプリで使いたいとき
2. 上げ方と、移るときの手伝い
Cache Components とは？
create-next-app で新しく作る手順は？
Cache Components をオフにするには？
作るときに出る警告は何？
よくある質問
まとめ
参考資料

Next.js 16.4 で、create-next-app の何が変わった？

公式の言い方

Next.js 公式の16.4の告知記事は、16.4 から Cache Components を「すべての Next.js のアプリにいちばんよい選択」として勧める、と書いています。そのうえで、create-next-app で作る新しいアプリは Cache Components が既定で有効になる、と説明しています。16.4.0 のリリースの変更一覧にも、create-next-app で Cache Components を既定にした変更（#99436）が載っています。

16.4.0 の公開は、米国の日付で2026年10月6日です。日本時間では10月7日になります（npm への公開が日本時間の10月7日 03:35、告知記事が同じ日の 05:00）。

出典: Next.js 16.4 の告知記事・GitHub: v16.4.0 のリリース・npm: next

「おすすめの既定」の中身

npx create-next-app を流すと、プロジェクト名のあとに「おすすめの既定を使うか」を聞かれます。公式の頁によると、「Yes」の中身は次のとおりです。手元の画面も同じ並びでした。

TypeScript
ESLint
React Compiler は使わない
Tailwind CSS
src/ フォルダーは使わない
App Router
Cache Components
AGENTS.md
Agent feedback

App Router は、app フォルダーの中にページを置いて作る、Next.js の今の標準の作り方です。AGENTS.md と Agent feedback は、あとの節で説明します。

出典: Next.js 公式: create-next-app

設定ファイルに入る2行

公式は、「Cache Components」を、Next.js の設定にある2つの旗（オン・オフの設定）で使う新しい書き方のこと、と説明しています。旗の名前は cacheComponents と partialPrefetching です。おすすめの既定で作ったアプリには、この2つが最初から入っています。

手元で npx create-next-app@16.4.1 のおすすめの既定で作った next.config.ts は、次のとおりです。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  experimental: {
    agentFeedback: true,
  },
  cacheComponents: true,
  partialPrefetching: true,
  turbopack: {
    rules: {
      "*.css": {
        loaders: ["@tailwindcss/turbopack"],
        as: "*.css",
      },
    },
  },
};

export default nextConfig;

cacheComponents: true と partialPrefetching: true が Cache Components の2行です。experimental.agentFeedback は Agent feedback の設定で、turbopack.rules は Tailwind CSS 用です。

このとき package.json に入った版は、next が 16.4.1、react と react-dom が 19.3.0、eslint-config-next が 16.4.1 でした（どれも ^ なしの固定です）。Next.js 16.4 は React 19.3 を同梱している、と公式は書いています。

出典: Next.js 公式: Caching（Cache Components を有効にする）・Next.js 16.4 の告知記事（Cache Components）

既存のアプリにも効く？

効きません。変わるのは、create-next-app で新しく作るアプリだけです。

next 16.4.1 のソース（node_modules/next/dist/server/config-shared.js の 146 行目）では、cacheComponents の既定値は false でした。だから、既存のアプリを 16.4 に上げただけでは、Cache Components は有効になりません。なお、cacheComponents の文書の頁には「既定値は false」という一文は見つかりませんでした。この点は、ソースで見た内容です。

既存のアプリで使いたいとき

公式は、既存のアプリや手で作ったアプリで使うには、next.config に cacheComponents と partialPrefetching の2つを足す、と書いています。

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
};

上の例は、公式の文と、手元で作ったアプリの next.config.ts に合わせた形です。既存のアプリに足して動かすことまでは、手元で流していません。

2つはセットで書きます。公式の partialPrefetching の頁によると、次の決まりがあります。

partialPrefetching は cacheComponents が無いと使えません。無いと、next dev と next build が設定の確かめで止まります
cacheComponents だけを書いて partialPrefetching を書かないと、partialPrefetching: false と同じに動き、警告が出ます

公式の版の履歴では、cacheComponents は 16.0.0 で experimental の中から外に出て、正式な設定になりました。partialPrefetching は 16.3.0 で入っています。

上げ方と、移るときの手伝い

Next.js を上げるには、公式の文書は npx next upgrade を案内しています（16.1.0 より前の版では使えず、npx @next/codemod@canary upgrade latest を使います）。手で上げるときは、npm i next@latest react@latest react-dom@latest eslint-config-next@latest です。この記事では、手元で上げる手順は流していません。

既存のアプリを Cache Components に移すことについて、告知記事は AI のエージェント向けの道具を挙げています。next upgrade --agent というコマンドと、移すときの書き換えを手伝う Skills です。くわしい使い方は、この記事では確かめていません。

出典: Next.js 公式: partialPrefetching・Next.js 公式: cacheComponents（版の履歴）・Next.js 16.4 の告知記事

Cache Components とは？

「キャッシュするものを自分で選ぶ」仕組み

Cache Components は、コンポーネント（画面の部品）の木の中で、「ここはキャッシュしてよい」という所に印を付ける機能のまとまりです。公式は、'use cache' を「HTTP の Cache-Control ヘッダー（キャッシュのしかたを伝える送信時の指示）のコンポーネント版」にたとえています。

考え方は、次の3点です。

データの取得は、既定では毎回行います（動的）。キャッシュするものは、ページ・コンポーネント・関数の単位で自分で選びます
Next.js は、静的な HTML の「殻（シェル）」を先に返し、動的な中身はできた所から流し込みます（ストリーミング）。1つのページの中で、静的な部分と動的な部分を混ぜられます
前の App Router の版にあった暗黙のキャッシュ（何も書かなくても効くキャッシュ）を、'use cache' の印で置き換えます。キャッシュは、自分で選んだときだけ効く（opt-in）形になります

出典: Next.js 16.4 の告知記事（What are Cache Components?）・Next.js 公式: cacheComponents

`'use cache'` の印

'use cache' は、async（非同期）の関数やコンポーネントの返り値をキャッシュする印です。公式の頁は、使い方を2つに分けています。

データ向け: データを取ってくる関数（getUsers() など）の頭に書く
画面向け: コンポーネントやページ全体の頭に書く

ファイルの先頭に書くと、そのファイルから export した関数がすべてキャッシュされます。印を付ける関数やコンポーネントは、async でなければなりません。

公式は、'use cache' ごとに cacheLife（キャッシュの寿命。例: cacheLife('hours')）を組み合わせることを勧めています。付けないときは、default の設定が使われます。

出典: Next.js 公式: Caching（Usage）・Next.js 公式: use cache

毎回新しいデータは `<Suspense>` で包む

リクエストのたびに新しいデータが要るもの（API やデータベースの読み取りなど）には、'use cache' を付けません。代わりに、そのコンポーネントを <Suspense> で包み、読み込み中に出す表示（fallback）を渡します。<Suspense> は、中身ができるまでの間、代わりの表示を出す React の部品です。fallback は静的な殻に入り、中身はリクエストのときに流れてきます。

cookies・headers・searchParams・params のように、リクエストのときにしか分からない値を読むコンポーネントも、<Suspense> で包みます。公式によると、キャッシュしていない読み取りを <Suspense> で包まないと、開発中の画面（dev overlay）に「blocking-route」という知らせが出ます。この知らせは、この記事では手元で出していません。

出典: Next.js 公式: Caching（Streaming uncached data）・Next.js 公式: Caching（Runtime APIs）

そのほかに知っておくこと

ページを移るとき、前のページを消さずに「隠す」ようになります（React の <Activity>）。戻ると、フォームの入力などがそのまま残ります
Cache Components は Node.js のランタイムが要ります。export const runtime = 'edge' のような runtime の書き出しは使えず、消す必要があります

出典: Next.js 公式: cacheComponents（Navigation with Activity）

できたひな形には、まだ何も書かれていない

おすすめの既定で作ったひな形の app/page.tsx と app/layout.tsx には、use cache も Suspense も cookies も書かれていませんでした（grep で0件）。それでも npm run build は、/ と /_not-found を「○ (Static)」（静的に先に作った）と表示しました。

▲ Next.js 16.4.1 (Turbopack)
…
- Cache Components enabled
- Partial Prefetching enabled
…
Route (app)
┌ ○ /
└ ○ /_not-found

○  (Static)  prerendered as static content

npm run dev でも、同じ「Cache Components enabled」「Partial Prefetching enabled」の2行が出ました。上の出力は、途中の行を省いています。

16.4 で増えた、静的に守る設定

16.4 の告知記事には、ensureStatic という新しい設定も載っています。ページやレイアウトに export const ensureStatic = 'navigation' と書くと、動的な中身が入ったときにビルドを失敗させて、静的なページのまま守れます。値は 'navigation'・'prefetch'・'shell' です。公式は、多くの動的なアプリには要らない、通販サイトや紹介ページ、ブログのような最適化したサイト向けだ、と書いています。この記事では、手元で試していません。

出典: Next.js 16.4 の告知記事（ensureStatic）

設定なしで効く改善

公式は、16.4 にはすべてのアプリに効く改善もある、と書いています。例として、Turbopack のディスクのキャッシュが 20〜25% 小さくなること、サーバー側の HMR（ファイルを直したときの差し替え）が要るときだけ動くこと、本番の CSS Modules のクラス名が短くなることが挙がっています。数字は公式の数字で、この記事では手元で測っていません。

出典: Next.js 16.4 の告知記事（Improvements for all apps）

create-next-app で新しく作る手順は？

要る Node.js の版

公式の文書が書く、要る Node.js は 20.9 以上です（next 16.4.1 の engines も >=20.9.0 です）。OS は macOS・Windows（WSL を含む）・Linux で、TypeScript は 5.1.0 以上です。

ただし、一緒に入る eslint-visitor-keys 5.0.1 は、^20.19.0 || ^22.13.0 || >=24 を求めています。これだと、20.19 より前の 20 系や 21 系では、作るときに警告が出ます。手元で出たのは 21.7.1 だけで、20.9 では流していません（警告は、次の節に載せました）。これから入れるなら、2026年10月19日時点の LTS（長く保守される版）の 24 系（24.22.0）か 22 系（22.23.3）が無難です。26 系の 26.12.0 は、LTS ではありません。この記事では、Node.js 22 と 24 では create-next-app を流していません。

出典: Next.js 公式: Installation（System requirements）・Node.js の index.json・npm: next

作るコマンド

公式のインストールの頁にある、いちばん短い手順は次のとおりです。

npx create-next-app@latest my-app --yes
cd my-app
npm run dev

my-app はプロジェクト名（フォルダー名）で、好きな名前に変えられます。npm run dev のあと、ブラウザーで http://localhost:3000 を開くと、ひな形が見られます。

--yes は、質問を飛ばして、前に選んだ設定（保存した設定）か既定で作る旗です（公式の説明）。保存した設定がどう効くかは、この記事では確かめていません。質問に答えながら作るときは、--yes を付けずに npx create-next-app@latest だけを流します。

@latest は、そのとき最新の版を取ってくる書き方です。手元で流したのは npx create-next-app@16.4.1 で、@latest と 16.4.2 では流していません。16.4.1 で作ると、最後に「A new version of create-next-app is available!」と表示されました（16.4.2 が出ているためです）。

出典: Next.js 公式: Installation（Quick start）・npm: create-next-app

質問に答えて作るとき

質問ありで流すと、まずプロジェクト名を聞かれ、そのあとに「おすすめの既定を使うか」を聞かれます。「Yes, use recommended defaults」を選べば、前の節の中身で作られます。「No, customize settings」を選ぶと、TypeScript・リンター・Tailwind CSS・App Router などを1つずつ聞かれます。その中に「Would you like to use Cache Components?」があり、手元の画面では、最初から Yes 側が選ばれていました。

できるもの

おすすめの既定で作ると、app/（page.tsx・layout.tsx など）・public/・next.config.ts・package.json・tsconfig.json・eslint.config.mjs・AGENTS.md などができます。package.json の中身は次のとおりです。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.4.1",
    "react": "19.3.0",
    "react-dom": "19.3.0"
  },
  "devDependencies": {
    "@tailwindcss/turbopack": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "16.4.1",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

tsconfig.json の読み方は、tsconfig.json の記事で説明しています。Next.js ではなく Vite で React を始める方法は、Vite の記事にまとめています。

AGENTS.md は何？

AGENTS.md は、コードを書く AI（コーディング用のエージェント）への案内のファイルです。おすすめの既定では、最初から入ります。中身は、「この Next.js はあなたの知っている Next.js ではない。コードを書く前に、node_modules/next/dist/docs/ の案内を読むこと」という一節でした。旗では --agents-md で入り、既定でオンです。

Agent feedback は何？

Agent feedback は、AI のエージェントが、Next.js への報告の下書きを作る機能です。実験的な機能で、おすすめの既定で作ると有効になります。公式によると、下書きは自分で見て、編集や破棄ができ、「Send feedback」を押すまで何も送られません。

experimental.agentFeedback の設定の既定値は無効（false）で、おすすめの既定で作ると true が入ります。動かすには、Next.js の Telemetry（匿名の利用状況の送信）が有効である必要があり、CI では動きません。

手元では NEXT_TELEMETRY_DISABLED=1 を付けて流しました。そのため、初めて npm run dev を流したときに出るはずの Telemetry の知らせと、Agent feedback の下書きは見ていません。

作り方で有無が変わった点もあります。「Yes, use recommended defaults」では Agent feedback も入り、「No, customize settings」の最後の質問（Agent feedback）も、既定が Yes でした。一方、--skip-install のような旗を付けて質問を飛ばして作ると、既定の一覧に「No agent feedback」が出て、next.config.ts に agentFeedback は入りませんでした（そのときは、保存した設定に Agent feedback の項目が無い状態でした）。

出典: Next.js 16.4 の告知記事（Agent feedback）・Next.js 公式: agentFeedback・Next.js 公式: create-next-app（Reference）

Cache Components をオフにするには？

オフにする方法は、「作るとき」と「作ったあと」で変わります。

作るとき（その1）質問で No にする

最初の質問で「No, customize settings」を選び、「Would you like to use Cache Components?」で No にします。手元で作ったところ、できた next.config.ts に cacheComponents も partialPrefetching もありませんでした。npm run dev の表示にも「Cache Components enabled」が出ませんでした。

作るとき（その2）旗を付ける

旗 --no-cache-components を付ける方法もあります。公式の旗の表は、--no-* は既定を打ち消す旗で、--cache-components は App Router では既定、と書いています。

npx create-next-app@latest my-app --yes --no-cache-components

手元で流したのは、npx create-next-app@16.4.1 my-app-flag --yes --no-cache-components --skip-install --disable-git です（--skip-install と --disable-git は、依存を入れない・git を始めないための旗です）。できた next.config.ts に、cacheComponents は入りませんでした。

作ったあと

作ったあとにオフにするには、next.config.ts から次の2行を消します。cacheComponents の既定値は false なので、消せばオフになります。

  cacheComponents: true,
  partialPrefetching: true,

2行とも消してください。partialPrefetching: true だけを残すと、next dev と next build が設定の確かめで止まります。

この手順には注意があります。公式の文書に「オフにする手順」の一文は、見つかりませんでした。ここで書いたのは、ソースで見た既定値（false）と、partialPrefetching の頁の決まりから組み立てた手順です。手元で2行を消して npm run dev を流すことは、していません。質問で No にして作ったアプリの next.config.ts と見比べたところ、差はこの2行だけでした（experimental.agentFeedback はどちらにも入っていました）。

Cache Components を使わないときのキャッシュの説明は、公式の別の頁「Caching and Revalidating (Previous Model)」にあります。中身は、この記事では読んでいません。

出典: Next.js 公式: create-next-app・Next.js 公式: partialPrefetching・Next.js 公式: Caching and Revalidating (Previous Model)

作るときに出る警告は何？

手元で npx create-next-app@16.4.1 を流すと、最後のほうに次の表示が出ました。要所を書きます。

5 high severity vulnerabilities

5 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

「high severity vulnerabilities（深刻度の高い脆弱性）が5件」という表示です。npm audit で中身を読むと、braces というパッケージの脆弱性（スタックを使い切る DoS）でした。eslint-config-next から @next/eslint-plugin-next・fast-glob・micromatch・braces へと続く鎖で、next 本体ではありません。16.4.1 で直った脆弱性（React・Next.js の脆弱性）とは別のものです。package の名前で見分けました。

npm audit は、直し方として npm audit fix --force を示します。ただし、eslint-config-next@14.2.35 を入れる、互換の無い変更（breaking change）だと表示されます（いまの 16.4.1 から下げることになります）。この記事では、勧めません。手元でも、npm audit fix は流していません（npm audit を読んだだけです）。

EBADENGINE

手元の Node.js 21.7.1 では、作るときに npm WARN EBADENGINE が4つ出ました。minimatch・eslint-visitor-keys・brace-expansion・balanced-match が、Node.js 21 を対象の範囲に入れていないという警告です。例は次のとおりです。

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'eslint-visitor-keys@5.0.1',
npm WARN EBADENGINE   required: { node: '^20.19.0 || ^22.13.0 || >=24' },
npm WARN EBADENGINE   current: { node: 'v21.7.1', npm: '10.5.0' }
npm WARN EBADENGINE }

このときも、作ること、npm run dev、npm run build は通りました。

そのほかの表示

「npm WARN deprecated eslint@9.39.5: This version is no longer supported.」（この版の eslint はサポートが終わっている）も出ました（表示はこのあとも続きます）。また、前の節で書いた「A new version of create-next-app is available!」も出ます。

出典: GitHub Advisory: GHSA-vfj7-8cjw-p6xm の警告（npm audit の表示）

よくある質問

16.4 に上げると、既存のアプリで Cache Components が有効になる？

なりません。next 16.4.1 のソースでは、cacheComponents の既定値は false です。有効にするには、next.config に cacheComponents: true と partialPrefetching: true を自分で足します。16.3 などの既存のアプリを 16.4 に上げて、設定が自動で足されるかどうかは、この記事では流していないので確かめていません。くわしくは「既存のアプリにも効く？」の節にあります。

Cache Components をあとからオフにするには？

next.config.ts から cacheComponents: true と partialPrefetching: true の2行を、両方消します。partialPrefetching: true だけを残すと、next dev と next build が止まります。ただし、公式に「オフにする手順」の一文は見つからず、ソースと文書から組み立てた手順で、手元で流してはいません。くわしくは「Cache Components をオフにするには？」の節にあります。

Node.js 22 や 24 でも動く？

公式の文書は、要る Node.js を 20.9 以上としています。ただし、この記事で create-next-app を流したのは Node.js 21.7.1 だけで、20・22・24 では流していません。pnpm・yarn・bun と Windows でも流していません。くわしくは「要る Node.js の版」の項にあります。

create-next-app を 16.4.2 で流すと、何か違う？

流していないので、確かめていません。2026年10月19日時点で、npx create-next-app@latest は 16.4.2 を取ってきます。16.4.2 の公開された変更の一覧には、不具合の直しと文書の直しが載っていて、セキュリティの項目は書かれていません。この記事の出力は、すべて 16.4.1 のものです。

Telemetry を切ると、Agent feedback はどうなる？

公式は、Agent feedback は Telemetry が有効でないと動かず、CI でも動かない、と書いています。手元では NEXT_TELEMETRY_DISABLED=1 を付けて流したので、Telemetry を切らない環境での動きや、下書きの様子は見ていません。使いたくないときは、experimental.agentFeedback を false にします。作るときの質問の文にも、この書き方が載っていました。

まとめ

16.4 から、npx create-next-app@latest の「おすすめの既定」で作るアプリは、Cache Components が最初から有効（cacheComponents: true と partialPrefetching: true の2行）
既存のアプリには効かない。cacheComponents の既定値は false（next 16.4.1 のソースで確かめた。文書の頁では見つからなかった）。使うなら2行を自分で足す
Cache Components は、データ取得は既定で毎回行い、キャッシュするものを 'use cache' で自分で選ぶ仕組み。毎回新しいデータは <Suspense> で包む
オフにするなら、作るとき（質問で No か --no-cache-components）は手元で確かめた。作ったあとは2行を両方消す（組み立てた手順で、手元では流していない）
16.4.0 は2026年10月14日の脆弱性の対象。16.4.1 以上を使う。最新は 16.4.2（2026年10月19日時点）で、この記事の出力は 16.4.1 のもの
要る Node.js は 20.9 以上。入れるなら LTS の 24 か 22。作るときの 5 high severity vulnerabilities は braces の件で、16.4.1 の脆弱性とは別。npm audit fix --force は勧めない
速さや大きさの数字（例: Turbopack のディスクのキャッシュが 20〜25% 小さい）は公式の数字で、手元では測っていない