Continuous Integration (CI) Build Caching

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

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

Wenn Ihr CI nicht so konfiguriert ist, dass .next/cache zwischen den Builds beibehalten wird, kann ein Kein Cache erkannt-Fehler auftreten.

Hier sind einige Beispiel-Cache-Konfigurationen für gängige CI-Anbieter:

Vercel

Next.js-Caching ist automatisch für Sie konfiguriert. Es ist keine Aktion Ihrerseits erforderlich. Wenn Sie Turborepo auf Vercel verwenden, erfahren Sie hier mehr.

CircleCI

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

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 Dokumentation von CircleCI zum Einrichten von Build-Caching.

Travis CI

Fügen Sie Folgendes zu Ihrer .travis.yml hinzu oder führen Sie es zusammen:

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

GitLab CI

Fügen Sie Folgendes zu Ihrer .gitlab-ci.yml hinzu oder führen Sie es zusammen:

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 (oder führen Sie zusammen) Folgendes zu Ihrer buildspec.yml hinzu:

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

GitHub Actions

Verwenden Sie GitHub's actions/cache, fügen Sie den folgenden Schritt in Ihrer Workflow-Datei hinzu:

uses: actions/cache@v4
with:
  # Hier Cache mit `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn oder Caching mit actions/setup-node https://github.com/actions/setup-node
  path: |
    ~/.npm
    ${{ github.workspace }}/.next/cache
  # Neuen Cache generieren, wenn Pakete oder Quelldateien sich ändern.
  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
  # Wenn sich Quelldateien geändert haben, aber Pakete nicht, von einem vorherigen Cache wiederherstellen.
  restore-keys: |
    ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

Bitbucket Pipelines

Fügen Sie Folgendes zu Ihrer bitbucket-pipelines.yml auf oberster Ebene hinzu (auf gleicher Ebene wie pipelines):

definitions:
  caches:
    nextcache: .next/cache

Referenzieren Sie es dann im caches-Abschnitt des step Ihrer Pipeline:

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

Heroku

Verwenden Sie Heroku's benutzerdefinierten Cache, fügen Sie ein cacheDirectories-Array in Ihrer Top-Level-package.json hinzu:

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

Azure Pipelines

Verwenden Sie Azure Pipelines' Cache-Task, fügen Sie die folgende Task in Ihrer Pipeline-yaml-Datei hinzu, bevor die Task ausgeführt wird, 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, fügen Sie den folgenden Build-Schritt zu Ihrer Jenkinsfile hinzu, wo Sie normalerweise next build oder npm install ausführen würden:

stage("Wiederherstellen von npm-Paketen") {
    steps {
        // Schreibt Lock-Datei in 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 Lock-Datei in 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"
        }
    }
}