Continuous Integration (CI) Build Caching

Next.js는 빌드 성능을 향상시키기 위해 빌드 간에 공유되는 캐시를 .next/cache에 저장합니다.

Continuous Integration (CI) 환경에서 이 캐시를 활용하려면 빌드 간의 캐시가 올바르게 유지되도록 CI 워크플로우를 구성해야 합니다.

CI가 빌드 간에 .next/cache를 유지하도록 구성되지 않은 경우 No Cache Detected 오류가 발생할 수 있습니다.

다음은 일반적인 CI providers에 대한 캐시 구성 예시입니다:

Vercel

Next.js 캐시는 자동으로 구성됩니다. 추가로 필요한 작업은 없습니다.

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의 빌드 캐시 설정 문서 (opens in a new tab)를 참조하십시오.

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/plugin-nextjs (opens in a new tab)와 함께 Netlify Plugins (opens in a new tab)를 사용합니다.

AWS CodeBuild

buildspec.yml에 다음 내용을 추가하거나 병합합니다:

cache:
  paths:
    - 'node_modules/**/*' # `yarn` 또는 `npm i`를 더 빠르게 수행하기 위해 `node_modules`를 캐시합니다.
    - '.next/cache/**/*' # 애플리케이션 재빌드를 더 빠르게 수행하기 위해 Next.js를 캐시합니다.

GitHub Actions

GitHub의 actions/cache (opens in a new tab)를 사용하여 워크플로우 파일에 다음 단계를 추가합니다:

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

그런 다음 파이프라인 step의 caches 섹션에서 아래 내용을 참조하십시오:

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

Heroku

Heroku의 custom cache (opens in a new tab)를 사용하여 최상위 package.json에 cacheDirectories 배열을 추가합니다:

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

Azure Pipelines

Azure Pipelines의 Cache task (opens in a new tab)를 사용하여 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 (opens in a new tab) 플러그인을 사용하여 Jenkinsfile에서 next build 또는 npm install을 실행하는 부분에 다음 빌드 단계를 추가합니다:

stage("Restore npm packages") {
    steps {
        // GIT_COMMIT 해시를 기반으로 캐시에 lock-file을 작성합니다.
        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 해시를 기반으로 캐시에 lock-file을 작성합니다.
        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"
        }
    }
}

Multi Zones Upgrading