Konfiguration von Continuous Integration (CI) Build-Caching

Um die Build-Leistung zu verbessern, speichert Next.js einen Cache in .next/cache, der zwischen Builds gemeinsam genutzt wird.

Um diesen Cache in Continuous Integration (CI)-Umgebungen nutzen zu können, muss Ihr CI-Workflow so konfiguriert werden, dass der Cache zwischen Builds korrekt beibehalten wird.

Wenn Ihr CI nicht so konfiguriert ist, dass .next/cache zwischen Builds beibehalten wird, kann es zu einem No Cache Detected-Fehler kommen.

Hier sind einige Beispielkonfigurationen für gängige CI-Anbieter:

Vercel

Das Caching für Next.js wird automatisch für Sie konfiguriert. Es sind keine weiteren Aktionen erforderlich. Wenn Sie Turborepo auf Vercel verwenden, finden Sie hier weitere Informationen.

CircleCI

Bearbeiten Sie Ihren save_cache-Schritt in .circleci/config.yml, um .next/cache einzubeziehen:

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

Wenn Sie keinen save_cache-Schlüssel haben, folgen Sie bitte der CircleCI-Dokumentation zum Einrichten von Build-Caching.

Travis CI

Fügen Sie Folgendes in Ihre .travis.yml ein oder mergen Sie es:

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

GitLab CI

Fügen Sie Folgendes in Ihre .gitlab-ci.yml ein oder mergen Sie es:

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

Netlify CI

Verwenden Sie Netlify Plugins mit @netlify/plugin-nextjs.

AWS CodeBuild

Fügen Sie Folgendes in Ihre buildspec.yml ein oder mergen Sie es:

cache:
  paths:
    - 'node_modules/**/*' # Cache `node_modules` für schnelleres `yarn` oder `npm i`
    - '.next/cache/**/*' # Cache Next.js für schnellere Anwendungsrebuilds

GitHub Actions

Verwenden Sie GitHubs actions/cache und fügen Sie den folgenden Schritt in Ihre Workflow-Datei ein:

uses: actions/cache@v4
with:
  # Informationen zum Caching mit `yarn`, `bun` oder anderen Paketmanagern finden Sie hier: https://github.com/actions/cache/blob/main/examples.md oder Sie können Caching mit actions/setup-node nutzen: https://github.com/actions/setup-node
  path: |
    ~/.npm
    ${{ github.workspace }}/.next/cache
  # Erzeugt einen neuen Cache, wenn sich Pakete oder Quelldateien ändern.
  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
  # Wenn sich Quelldateien geändert haben, aber Pakete nicht, wird ein vorheriger Cache für den Rebuild verwendet.
  restore-keys: |
    ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

Bitbucket Pipelines

Fügen Sie Folgendes auf oberster Ebene (gleiche Ebene wie pipelines) in Ihre bitbucket-pipelines.yml ein oder mergen Sie es:

definitions:
  caches:
    nextcache: .next/cache

Verweisen Sie dann im caches-Abschnitt Ihres Pipeline-steps darauf:

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

Heroku

Verwenden Sie Herokus custom cache und fügen Sie ein cacheDirectories-Array in Ihrer Top-Level-package.json hinzu:

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

Azure Pipelines

Verwenden Sie Azure Pipelines' Cache task und fügen Sie die folgende Aufgabe in Ihre Pipeline-YAML-Datei ein, und zwar vor der Aufgabe, die next build ausführt:

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

Jenkins (Pipeline)

Verwenden Sie das Job Cacher-Plugin von Jenkins und fügen Sie den folgenden Build-Schritt in Ihre Jenkinsfile ein, normalerweise dort, wo Sie next build oder npm install ausführen würden:

stage("Restore npm packages") {
    steps {
        // Schreibt eine Lock-Datei in den Cache basierend auf dem 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 {
        // Schreibt eine Lock-Datei in den Cache basierend auf dem 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"
        }
    }
}

Konfiguration von Continuous Integration (CI) Build-Caching

On this page