CIビルドキャッシュの設定方法

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

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

CIが .next/cache をビルド間で保持するように設定されていない場合、キャッシュが検出されませんというエラーが表示されることがあります。

一般的なCIプロバイダーのキャッシュ設定例を以下に示します：

Vercel

Next.jsのキャッシュは自動的に設定されます。ユーザー側での操作は必要ありません。VercelでTurborepoを使用している場合は、こちらで詳細を確認してください。

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/**/*' # `yarn`や`npm i`を高速化するために`node_modules`をキャッシュ
    - '.next/cache/**/*' # アプリケーションの再ビルドを高速化するためにNext.jsをキャッシュ

GitHub Actions

GitHubのactions/cacheを使用して、ワークフローファイルに次のステップを追加してください：

uses: actions/cache@v4
with:
  # `yarn`、`bun`、その他のパッケージマネージャーでのキャッシュについては https://github.com/actions/cache/blob/main/examples.md を参照するか、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'

Jenkins (Pipeline)

JenkinsのJob Cacherプラグインを使用して、通常 next build や npm install を実行する Jenkinsfile に次のビルドステップを追加してください：

stage("Restore npm packages") {
    steps {
        // GIT_COMMITハッシュに基づいてキャッシュ用のロックファイルを書き込みます
        writeFile file: "next-lock.cache", text: "$GIT_COMMIT"
 
        cache(caches: [
            arbitraryFileCache(
                path: "node_modules",
                includes: "**/*",
                cacheValidityDecidingFile: "package-lock.json"
            )
        ]) {
            sh "npm install"
        }
    }
}
stage("Build") {
    steps {
        // GIT_COMMITハッシュに基づいてキャッシュ用のロックファイルを書き込みます
        writeFile file: "next-lock.cache", text: "$GIT_COMMIT"
 
        cache(caches: [
            arbitraryFileCache(
                path: ".next/cache",
                includes: "**/*",
                cacheValidityDecidingFile: "next-lock.cache"
            )
        ]) {
            // `next build`と同等
            sh "npm run build"
        }
    }
}