Настройка кэширования сборок в Continuous Integration (CI)

Для повышения производительности сборки Next.js сохраняет кэш в .next/cache, который используется между сборками.

Чтобы использовать этот кэш в средах Continuous Integration (CI), необходимо настроить рабочий процесс CI для правильного сохранения кэша между сборками.

Если ваш CI не настроен на сохранение .next/cache между сборками, вы можете увидеть ошибку No Cache Detected.

Ниже приведены примеры конфигураций кэширования для распространённых CI-провайдеров:

Vercel

Кэширование Next.js настраивается автоматически. Вам не требуется предпринимать никаких действий. Если вы используете Turborepo на Vercel, узнайте больше здесь.

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 по настройке кэширования сборок.

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

Используя actions/cache от GitHub, добавьте следующий шаг в ваш рабочий файл:

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

Затем укажите это в разделе caches шага вашего пайплайна:

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

Heroku

Используя custom cache от Heroku, добавьте массив cacheDirectories в ваш корневой package.json:

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

Azure Pipelines

Используя Cache task от Azure Pipelines, добавьте следующую задачу в ваш yaml-файл пайплайна перед задачей, выполняющей next build:

- task: Cache@2
  displayName: 'Кэширование .next/cache'
  inputs:
    key: next | $(Agent.OS) | yarn.lock
    path: '$(System.DefaultWorkingDirectory)/.next/cache'

Jenkins (Pipeline)

Используя плагин Job Cacher для Jenkins, добавьте следующий шаг сборки в ваш Jenkinsfile там, где вы обычно запускаете next build или npm install:

stage("Восстановление npm пакетов") {
    steps {
        // Записывает lock-файл в кэш на основе хэша 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("Сборка") {
    steps {
        // Записывает lock-файл в кэш на основе хэша 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"
        }
    }
}

Настройка кэширования сборок в Continuous Integration (CI)

On this page