AI Assisted
この記事は筆者の実装経験をもとに実装コードをベースで執筆し、AIによる校閲・推敲を経て公開しています。

Next.js 16 Cache Components 実践ガイド

Next.js 16で導入された "use cache" ディレクティブによる新しいキャッシュモデル。 従来の「ページ単位のISR」から「コンポーネント単位の明示的キャッシュ」へのパラダイムシフトです。

今回は、この新機能の解説と、実プロジェクト（nero15.dev）での移行作業で得た知見を共有します。

---

TL;DR

• Next.js 16で cacheComponents: true を有効にすると、従来の revalidate / dynamic は**使用不可（ビルドエラー）**になる。
• つまり、段階的移行は不可。全ファイル一括で "use cache" + cacheLife() に書き換える必要がある。
• コンポーネント/関数単位でキャッシュ期間を細かく制御できる。
• PPR (Partial Prerendering) と組み合わせることで、「静的シェルの即時表示 + 動的パーツのストリーミング」という理想的なUXが実現できる。

---

Cache Componentsとは

従来の「デフォルトでキャッシュされる（暗黙的）」挙動から、「明示的にキャッシュをオプトインする」方式への変更です。

従来のキャッシュ（Next.js 15以前）

// ページ全体の設定しかできない
export const revalidate = 3600

export default async function Page() {
  const data = await fetch('/api/data') // キャッシュされる
  const user = await getUser()          // これもキャッシュされる？
  return <div>{data}</div>
}

問題点:

• 「何がキャッシュされているか」がコードから読み取りにくい
• ページ単位でしか制御できず、動的な部分と静的な部分を混在させにくい
• デバッグが困難（不意にキャッシュされてしまう事故など）

新しいキャッシュ（Next.js 16以降）

// コンポーネント単位で制御
async function CachedSection() {
  'use cache'
  cacheLife('hours')  // 1時間キャッシュ

  const data = await fetchData()
  return <div>{data}</div>
}

async function RealtimeSection() {
  // デフォルトは動的（キャッシュなし）
  const data = await fetchRealtimeData()
  return <div>{data}</div>
}

メリット:

• 明示的: コードを見ればキャッシュ挙動が一目瞭然
• 粒度: コンポーネントや関数単位で細かく設定可能
• PPR: 動的部分と静的部分を自然に共存させられる

---

設定方法

1. next.config.js の設定

まずは機能を有効化します。

// next.config.js
const nextConfig = {
  // Cache Components有効化
  cacheComponents: true,

  // カスタムキャッシュプロファイル（任意）
  cacheLife: {
    fiveMinutes: {
      stale: 300,      // 5分間はキャッシュをそのまま返す
      revalidate: 300, // 5分後にバックグラウンド再検証
      expire: 3600,    // 1時間で強制期限切れ
    },
    oneDay: {
      stale: 86400,      // 1日間
      revalidate: 86400,
      expire: 604800,    // 1週間で強制期限切れ
    },
  },
}

2. 組み込みプロファイル

Next.jsが標準で用意しているプロファイルです。基本はこれらを使えば十分です。

---

基本的な使い方

コンポーネント単位でキャッシュ

// src/components/home/LatestPosts.tsx
import { cacheLife } from 'next/cache'

export default async function LatestPosts() {
  'use cache'
  cacheLife('minutes')  // 5分キャッシュ

  const posts = await fetchLatestPosts()

  return (
    <div className="grid grid-cols-3 gap-6">
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  )
}

関数単位でキャッシュ

データ取得関数そのものをキャッシュすることも可能です。

// src/lib/api/publicApi.ts
import { cacheLife } from 'next/cache'

export async function fetchPosts(params = {}) {
  'use cache'
  cacheLife('minutes')

  const response = await fetch('/api/posts?' + new URLSearchParams(params))
  return response.json()
}

---

PPRとの組み合わせ（実践例）

PPR（Partial Prerendering）を使うと、1つのページ内で静的部分と動的部分を共存させられます。

構成イメージ:

┌─────────────────────────────────────┐
│  ヘッダー（静的・即座に表示）          │
├─────────────────────────────────────┤
│  記事本文（静的・即座に表示）          │
├─────────────────────────────────────┤
│  ┌─────────────────────────────┐   │
│  │  関連記事（動的・後から表示）     │
│  │  Loading...                 │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

実装コード:

// src/app/posts/[id]/page.tsx
import { Suspense } from 'react'
import { fetchPost } from '@/lib/api/publicApi'
import RelatedPosts from '@/components/posts/RelatedPosts'
import RelatedPostsSkeleton from '@/components/posts/RelatedPostsSkeleton'

export default async function PostPage({ params }) {
  const { id } = await params
  const post = await fetchPost(id)

  return (
    <article>
      {/* 静的部分: ビルド時にプリレンダリングされ、TTFBが高速 */}
      <h1>{post.title}</h1>
      <div>{post.body}</div>

      {/* 動的部分: Suspense境界で囲み、ストリーミング配信 */}
      <Suspense fallback={<RelatedPostsSkeleton />}>
        <RelatedPosts tag={post.tags?.[0]} excludeId={post.id} />
      </Suspense>
    </article>
  )
}

// src/components/posts/RelatedPosts.tsx
import { cacheLife } from 'next/cache'

export default async function RelatedPosts({ tag, excludeId }) {
  'use cache'
  cacheLife('days')  // 関連記事は頻繁に変わらないので長くキャッシュ

  const posts = await fetchRelatedPosts(tag, excludeId)
  // ...
}

---

移行ガイド：一括対応の壁

⚠️ 重要: 段階的移行は不可

ここが最大の難関です。next.config.js で cacheComponents: true を有効にした瞬間、プロジェクト内の全ての revalidate / dynamic 設定がエラーになります。

Route segment config "revalidate" is not compatible with `nextConfig.cacheComponents`.
Please remove it.

つまり、1ファイルずつ移行することはできず、全ファイルを一括で書き換える必要があります。

移行対応表

移行手順

1. 影響範囲の特定

# 修正が必要なファイルをリストアップ
grep -r "export const revalidate" src/app/
grep -r "export const dynamic" src/app/

2. 各ファイルの修正

各ページファイルから export const revalidate を削除し、データ取得を行っているコンポーネントまたは関数に 'use cache' と cacheLife を追加します。

// Before: src/app/page.tsx
export const revalidate = 300 // 削除

export default async function Page() {
  const posts = await fetchPosts()
  return <PostList posts={posts} />
}

// After: src/app/page.tsx
import LatestPosts from '@/components/home/LatestPosts'

// Pageコンポーネント自体はキャッシュせず、中のコンポーネントで制御
export default function Page() {
  return <LatestPosts />
}

// After: src/components/home/LatestPosts.tsx
import { cacheLife } from 'next/cache'

export default async function LatestPosts() {
  'use cache'
  cacheLife('minutes') // ここで制御
  // ...
}

3. API Routeの移行

API Route (Route Handlers) も同様です。unstable_cache を使うか、処理関数自体に 'use cache' を付けます。

4. 設定の有効化

全ての修正が終わったら、最後に next.config.js を更新します。

const nextConfig = {
  cacheComponents: true,
}

---

既知の制限事項

1. use cache 内でのAPI制限

'use cache' スコープ内では、リクエストごとの動的データ（Cookie, Headers, SearchParams）には直接アクセスできません。

// ❌ NG
async function UserProfile() {
  'use cache'
  const cookieStore = await cookies() // エラー！
}

// ✅ OK: 引数として受け取る
async function UserProfile({ userId }) {
  'use cache'
  // ...
}

// 呼び出し元でCookieを取得して渡す
export default async function Page() {
  const cookieStore = await cookies()
  const userId = cookieStore.get('userId')?.value
  return <UserProfile userId={userId} />
}

2. データ更新時のキャッシュ無効化

データ更新（Mutation）を行った際、自動でキャッシュはクリアされません。revalidatePath や revalidateTag を手動で呼び出す必要があります。

import { revalidateTag } from 'next/cache'

async function updatePost(id, data) {
  await db.update(id, data)
  revalidateTag('posts') // 必須
}

---

まとめ

Next.js 16の Cache Components は、これまでの「分かりにくいキャッシュ」を一掃する素晴らしい変更です。 一括移行のハードルはありますが、一度移行してしまえば**「明示的で予測可能なキャッシュ制御」と「PPRによる高度なUX」**が手に入ります。

Next.js 17以降ではこの方式が標準になる予定ですので、今のうちに移行を進めておくことを強くおすすめします。

---

参考リンク

• Next.js 16 ブログ
• use cache ディレクティブ
• Cache Components ガイド