Sponsor
ntab.devntab.dev 提升效率的新标签页组件
点击查看
Menu

持续集成(CI)构建缓存

为了提高构建性能,Next.js 将缓存保存在 .next/cache 目录中,该缓存在构建之间是共享的。

要在持续集成(CI)环境中利用此缓存,你的 CI 工作流需要配置为正确地在构建之间保留缓存。

如果你的 CI 未配置在构建之间保留 .next/cache,你可能会看到 No Cache Detected 错误。

以下是一些常见 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 插件@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@v4
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

然后在管道的 stepcaches 部分引用它:

- 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 插件,在 Jenkinsfile 中通常运行 next buildnpm install 的位置添加以下构建步骤:

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"
        }
    }
}