継続的インテグレーション (CI) ビルドキャッシュ

ビルドパフォーマンスを向上させるため、Next.js は .next/cache にキャッシュを保存し、ビルド間で共有します。

継続的インテグレーション (CI) 環境でこのキャッシュを活用するには、CIワークフローがビルド間でキャッシュを正しく保持するように設定されている必要があります。

CI が .next/cache をビルド間で保持するように設定されていない場合、No Cache Detected エラーが表示される可能性があります。

以下に主要なCIプロバイダー向けのキャッシュ設定例を示します:

Vercel

Next.js のキャッシュは自動的に設定されます。追加の設定は不要です。

CircleCI

.circleci/config.yml の save_cache ステップを編集し、.next/cache を含めます:

steps:
  - save_cache:
      key: dependency-cache-{{ checksum "yarn.lock" }}
      paths:
        - ./node_modules
        - ./.next/cache

save_cache キーが存在しない場合は、CircleCI のビルドキャッシュ設定ドキュメントに従って設定してください。

Travis CI

.travis.yml に以下を追加またはマージします:

cache:
  directories:
    - $HOME/.cache/yarn
    - node_modules
    - .next/cache

GitLab CI

.gitlab-ci.yml に以下を追加またはマージします:

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - .next/cache/

Netlify CI

Netlify Plugins と @netlify/plugin-nextjs を使用します。

AWS CodeBuild

buildspec.yml に以下を追加（またはマージ）します:

cache:
  paths:
    - 'node_modules/**/*' # `node_modules` をキャッシュして `yarn` や `npm i` を高速化
    - '.next/cache/**/*' # Next.js をキャッシュしてアプリケーションのリビルドを高速化

GitHub Actions

GitHub の actions/cache を使用し、ワークフローファイルに以下のステップを追加します:

uses: actions/cache@v3
with:
  # `yarn` でのキャッシュについてはこちらを参照 https://github.com/actions/cache/blob/main/examples.md#node---yarn または actions/setup-node のキャッシュ機能を活用できます https://github.com/actions/setup-node
  path: |
    ~/.npm
    ${{ github.workspace }}/.next/cache
  # パッケージやソースファイルが変更されるたびに新しいキャッシュを生成
  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
  # ソースファイルが変更されてもパッケージが変更されていない場合、以前のキャッシュからリビルド
  restore-keys: |
    ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

Bitbucket Pipelines

bitbucket-pipelines.yml のトップレベル（pipelines と同じレベル）に以下を追加またはマージします:

definitions:
  caches:
    nextcache: .next/cache

そしてパイプラインの step セクションの caches で参照します:

- step:
    name: your_step_name
    caches:
      - node
      - nextcache

Heroku

Heroku のカスタムキャッシュを使用し、トップレベルの package.json に cacheDirectories 配列を追加します:

"cacheDirectories": [".next/cache"]

Azure Pipelines

Azure Pipelines のCacheタスクを使用し、next build を実行するタスクの前に以下のタスクをパイプライン yaml ファイルに追加します:

- task: Cache@2
  displayName: 'Cache .next/cache'
  inputs:
    key: next | $(Agent.OS) | yarn.lock
    path: '$(System.DefaultWorkingDirectory)/.next/cache'

継続的インテグレーション (CI) ビルドキャッシュ

On this page