كيفية تكوين تخزين البناء المؤقت للتكامل المستمر (CI)
لتحسين أداء البناء، يحفظ Next.js ذاكرة تخزين مؤقت في .next/cache يتم مشاركتها بين عمليات البناء المختلفة.
للاستفادة من هذه الذاكرة المؤقتة في بيئات التكامل المستمر (CI)، يجب تكوين سير العمل في CI الخاص بك للحفاظ على الذاكرة المؤقتة بشكل صحيح بين عمليات البناء.
إذا لم يتم تكوين CI الخاص بك للحفاظ على
.next/cacheبين عمليات البناء، قد ترى خطأ No Cache Detected.
فيما يلي بعض أمثلة تكوينات الذاكرة المؤقتة لمزودي CI الشائعين:
Vercel
يتم تكوين ذاكرة التخزين المؤقت لـ Next.js تلقائيًا لك. لا يلزمك اتخاذ أي إجراء. إذا كنت تستخدم Turborepo على Vercel، تعرف على المزيد هنا.
CircleCI
قم بتحرير خطوة save_cache في ملف .circleci/config.yml لتشمل .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/cacheGitLab CI
أضف أو ادمج ما يلي في ملف .gitlab-ci.yml:
cache:
key: ${CI_COMMIT_REF_SLUG}
paths:
- node_modules/
- .next/cache/Netlify CI
استخدم Netlify Plugins مع @netlify/plugin-nextjs.
AWS CodeBuild
أضف (أو ادمج) ما يلي إلى ملف buildspec.yml:
cache:
paths:
- 'node_modules/**/*' # تخزين `node_modules` مؤقتًا لـ `yarn` أو `npm i` أسرع
- '.next/cache/**/*' # تخزين Next.js مؤقتًا لإعادة بناء التطبيق بشكل أسرعGitHub Actions
باستخدام actions/cache من GitHub، أضف الخطوة التالية في ملف سير العمل الخاص بك:
uses: actions/cache@v4
with:
# راجع هنا للتخزين المؤقت مع `yarn` أو `bun` أو مديري الحزم الآخرين https://github.com/actions/cache/blob/main/examples.md أو يمكنك الاستفادة من التخزين المؤقت مع 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ثم أشر إليه في قسم caches من خطوة step في خط الأنابيب الخاص بك:
- step:
name: your_step_name
caches:
- node
- nextcacheHeroku
باستخدام custom cache من Heroku، أضف مصفوفة cacheDirectories في ملف package.json الرئيسي:
"cacheDirectories": [".next/cache"]Azure Pipelines
باستخدام مهمة Cache من Azure Pipelines، أضف المهمة التالية إلى ملف خط الأنابيب yaml في مكان ما قبل المهمة التي تنفذ next build:
- task: Cache@2
displayName: 'تخزين .next/cache مؤقتًا'
inputs:
key: next | $(Agent.OS) | yarn.lock
path: '$(System.DefaultWorkingDirectory)/.next/cache'Jenkins (Pipeline)
باستخدام Job Cacher plugin من Jenkins، أضف خطوة البناء التالية إلى ملف Jenkinsfile حيث تقوم عادةً بتشغيل next build أو npm install:
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"
}
}
}