Continuous Integration (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/**/*' # より高速な `yarn` または `npm i` のために `node_modules` をキャッシュ
- '.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
次に、パイプラインの step
の caches
セクションでそれを参照します:
- 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 プラグインを使用して、通常 next build
または npm install
を実行する場所の Jenkinsfile
に以下のビルドステップを追加します:
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"
}
}
}