︙

Continuous Integration (CI) Build Caching

build のパフォーマンスを向上させるために、Next.js は build 間で共有される cache を.next/cacheに保存します。

この cache を継続的インテグレーション(CI)環境で利用するためには、CI ワークフローが build 間で cache を正しく保持するように設定する必要があります。

あなたの CI が build 間で .next/cache を継続して設定されていない場合、No Cache Detected error が表示されるかもしれません。

ここには、一般的な CI プロバイダー用のいくつかの例の cache 設定があります：

Vercel

Next.js のキャッシングは自動的に設定されています。あなたが何かをする必要はありません。

CircleCI

あなたの save_cache ステップを .circleci/config.yml に編集して、.next/cache を含めてください。

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

save_cacheキーがない場合は、CircleCI のbuild キャッシングの設定に関するドキュメンテーションに従ってください。

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/**/*" # Cache `node_modules` for faster `yarn` or `npm i`
    - ".next/cache/**/*" # Cache Next.js for faster application rebuilds

GitHub Actions

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

uses: actions/cache@v4
with:
  # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
  path: |
    ~/.npm
    ${{ github.workspace }}/.next/cache
  # Generate a new cache whenever packages or source files change.
  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
  # If source files changed but packages didn't, rebuild from a prior cache.
  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 のカスタム cache を使用して、トップレベルの package.json にcacheDirectories配列を追加してください。

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

Azure Pipelines

Azure Pipelines のCache task を使用し、next buildを実行するタスクの前の何らかの場所に、パイプライン yaml ファイルに次のタスクを追加してください：

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

Jenkins (Pipeline)

Jenkinsfileの中で、通常next buildやnpm installを実行するところに、Jenkins のJob Cacher plugin を使って、次の build ステップを追加します:

stage("Restore npm packages") {
    steps {
        // Writes lock-file to cache based on the GIT_COMMIT hash
        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 {
        // Writes lock-file to cache based on the GIT_COMMIT hash
        writeFile file: "next-lock.cache", text: "$GIT_COMMIT"

        cache(caches: [
            arbitraryFileCache(
                path: ".next/cache",
                includes: "**/*",
                cacheValidityDecidingFile: "next-lock.cache"
            )
        ]) {
            // aka `next build`
            sh "npm run build"
        }
    }
}