Comment configurer la mise en cache des builds d'intégration continue (CI)

Pour améliorer les performances de build, Next.js enregistre un cache dans .next/cache qui est partagé entre les builds.

Pour tirer parti de ce cache dans les environnements d'intégration continue (CI), votre workflow CI devra être configuré pour persister correctement le cache entre les builds.

Si votre CI n'est pas configuré pour persister .next/cache entre les builds, vous pourriez voir une erreur No Cache Detected (Aucun cache détecté).

Voici quelques exemples de configurations de cache pour les principaux fournisseurs de CI :

Vercel

La mise en cache de Next.js est automatiquement configurée pour vous. Aucune action n'est requise de votre part. Si vous utilisez Turborepo sur Vercel, apprenez-en plus ici.

CircleCI

Modifiez votre étape save_cache dans .circleci/config.yml pour inclure .next/cache :

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

Si vous n'avez pas de clé save_cache, veuillez suivre la documentation de CircleCI sur la configuration de la mise en cache des builds.

Travis CI

Ajoutez ou fusionnez ce qui suit dans votre .travis.yml :

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

GitLab CI

Ajoutez ou fusionnez ce qui suit dans votre .gitlab-ci.yml :

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

Netlify CI

Utilisez les Netlify Plugins avec @netlify/plugin-nextjs.

AWS CodeBuild

Ajoutez (ou fusionnez) ce qui suit dans votre buildspec.yml :

cache:
  paths:
    - 'node_modules/**/*' # Cache `node_modules` pour accélérer `yarn` ou `npm i`
    - '.next/cache/**/*' # Cache Next.js pour accélérer les reconstructions d'application

GitHub Actions

En utilisant actions/cache de GitHub, ajoutez l'étape suivante dans votre fichier de workflow :

uses: actions/cache@v4
with:
  # Voir ici pour la mise en cache avec `yarn`, `bun` ou d'autres gestionnaires de paquets https://github.com/actions/cache/blob/main/examples.md ou vous pouvez utiliser la mise en cache avec actions/setup-node https://github.com/actions/setup-node
  path: |
    ~/.npm
    ${{ github.workspace }}/.next/cache
  # Génère un nouveau cache lorsque les paquets ou les fichiers sources changent.
  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
  # Si les fichiers sources ont changé mais pas les paquets, reconstruisez à partir d'un cache précédent.
  restore-keys: |
    ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

Bitbucket Pipelines

Ajoutez ou fusionnez ce qui suit dans votre bitbucket-pipelines.yml au niveau supérieur (même niveau que pipelines) :

definitions:
  caches:
    nextcache: .next/cache

Puis référencez-le dans la section caches de l'étape de votre pipeline :

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

Heroku

En utilisant le cache personnalisé de Heroku, ajoutez un tableau cacheDirectories dans votre package.json de niveau supérieur :

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

Azure Pipelines

En utilisant la tâche Cache d'Azure Pipelines, ajoutez la tâche suivante à votre fichier yaml de pipeline quelque part avant la tâche qui exécute next build :

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

Jenkins (Pipeline)

En utilisant le plugin Job Cacher de Jenkins, ajoutez l'étape de build suivante à votre Jenkinsfile là où vous exécuteriez normalement next build ou npm install :

stage("Restore npm packages") {
    steps {
        // Écrit un fichier de verrouillage dans le cache basé sur le hash 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 {
        // Écrit un fichier de verrouillage dans le cache basé sur le hash GIT_COMMIT
        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"
        }
    }
}

Comment configurer la mise en cache des builds d'intégration continue (CI)

On this page