پیکربندی کشینگ در CI برای Next.js – افزایش سرعت build با اشتراک‌گذاری حافظه .next/cache

Next.js برای بهبود عملکرد build، فایل‌های کش را در مسیر .next/cache ذخیره می‌کند. برای استفاده از این کش در محیط‌های CI، باید workflow پروژه به‌گونه‌ای تنظیم شود که این حافظه بین buildها حفظ شود. این مقاله نحوهٔ پیکربندی کشینگ در سرویس‌های CI محبوب مانند GitHub Actions، GitLab CI، Vercel، Jenkins و دیگر پلتفرم‌ها را بررسی می‌کند.

CI cachingNext.jsBuild performancePersistent cache

~2 min read · Updated Oct 26, 2025

مقدمه


Next.js برای افزایش سرعت build و کاهش هزینه‌ها، فایل‌های کش را در مسیر .next/cache ذخیره می‌کند. در محیط‌های CI، اگر این مسیر بین buildها حفظ نشود، با پیام No Cache Detected مواجه خواهید شد.


پیکربندی کش در سرویس‌های CI مختلف


Vercel


در Vercel کشینگ به‌صورت خودکار پیکربندی شده است و نیازی به اقدام خاصی نیست.


CircleCI


در فایل .circleci/config.yml مرحله save_cache را به‌صورت زیر تنظیم کنید:

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

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 استفاده کنید تا کشینگ به‌صورت خودکار انجام شود.


AWS CodeBuild


در فایل buildspec.yml بخش زیر را اضافه کنید:

cache:
  paths:
    - 'node_modules/**/*'
    - '.next/cache/**/*'

GitHub Actions


با استفاده از actions/cache مرحله زیر را در workflow اضافه کنید:

uses: actions/cache@v4
with:
  path: |
    ~/.npm
    ${{ github.workspace }}/.next/cache
  key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.ts', '**/*.tsx') }}
  restore-keys: |
    ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

Bitbucket Pipelines


در فایل bitbucket-pipelines.yml بخش زیر را اضافه کنید:

definitions:
  caches:
    nextcache: .next/cache

و در مرحلهٔ pipeline:

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

Heroku


در فایل package.json بخش زیر را اضافه کنید:

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

Azure Pipelines


از task Cache@2 استفاده کنید:

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

Jenkins (Pipeline)


با استفاده از پلاگین Job Cacher مراحل زیر را در Jenkinsfile اضافه کنید:

stage("Restore npm packages") {
  steps {
    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 {
    writeFile file: "next-lock.cache", text: "$GIT_COMMIT"
    cache(caches: [
      arbitraryFileCache(
        path: ".next/cache",
        includes: "**/*",
        cacheValidityDecidingFile: "next-lock.cache"
      )
    ]) {
      sh "npm run build"
    }
  }
}

جمع‌بندی


با پیکربندی صحیح کشینگ در محیط‌های CI، می‌توانید زمان build را کاهش داده و عملکرد پروژه‌های Next.js را بهینه کنید. حفظ مسیر .next/cache بین buildها نقش کلیدی در این فرآیند دارد.


Written & researched by Dr. Shahin Siami

Related Articles

مسیریابی پیشرفته و هوک‌های عملکرد در Next.js — راهنمای توسعه‌دهنده برای App Router

Next.js مجموعه‌ای غنی از هوک‌های کلاینت و ابزارهای کش و ناوبری را در اختیار توسعه‌دهندگان قرار می‌دهد. از خواندن پارامترهای مسیر تا گزارش Web Vitals و مدیریت کش، این مقاله مهم‌ترین ابزارهای App Router را با مثال‌های کاربردی معرفی می‌کند.

Continue

مدیریت احراز هویت و کش در Next.js — راهنمای توسعه‌دهنده برای امنیت و عملکرد پویا

Next.js با معرفی قابلیت‌های آزمایشی جدید، امکان کنترل دقیق‌تر دسترسی و کش داده‌ها را فراهم کرده است. تابع unauthorized برای مدیریت خطای 401 و هدایت کاربران به صفحه ورود، unstable_cache برای کش هوشمند عملیات سنگین، updateTag برای بازسازی آنی داده‌ها، و useLinkStatus برای نمایش وضعیت ناوبری استفاده می‌شوند. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات مهم بررسی می‌کند.

Continue

redirect و refresh در Next.js — ریدایرکت‌های هوشمند و تازه‌سازی مسیر در Server Actions

تابع redirect در Next.js برای هدایت کاربر به مسیر جدید استفاده می‌شود و بسته به نوع استفاده، پاسخ HTTP با وضعیت 307 یا 303 ارسال می‌کند. این تابع در Server Components، Client Components، Route Handlers و Server Actions قابل استفاده است. تابع refresh نیز برای تازه‌سازی مسیر کلاینت از درون Server Action استفاده می‌شود. این مقاله نحوه استفاده از هر دو تابع را با مثال‌های کاربردی و نکات مهم توضیح می‌دهد.

Continue

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

Next.js با معرفی NextRequest و NextResponse، APIهای Request و Response مرورگر را گسترش داده و ابزارهای قدرتمندی برای مدیریت کوکی‌ها، هدرها، ریدایرکت‌ها، بازنویسی مسیرها و پاسخ‌های JSON فراهم کرده است. این مقاله نحوه استفاده از این ابزارها را با مثال‌های کاربردی و نکات امنیتی توضیح می‌دهد.

Continue

headers، ImageResponse، notFound و permanentRedirect در Next.js — مدیریت درخواست‌ها، تولید تصویر، خطا و ریدایرکت

Next.js ابزارهای قدرتمندی برای مدیریت درخواست‌ها و پاسخ‌ها در کامپوننت‌های سروری فراهم کرده است. تابع headers برای خواندن هدرهای HTTP ورودی، ImageResponse برای تولید تصاویر داینامیک، notFound برای نمایش صفحه خطای 404، و permanentRedirect برای ریدایرکت دائمی کاربران استفاده می‌شوند. این مقاله نحوه استفاده از هر یک را با مثال‌های کاربردی توضیح می‌دهد.

Continue

راهنمای کامل استفاده از metadata و generateMetadata در Next.js

در نسخه‌های مدرن Next.js، مدیریت metadata صفحات بسیار قدرتمندتر و ساده‌تر شده است. metadata به‌صورت خودکار در تگ <head> صفحات تزریق می‌شود و نقش مهمی در SEO، اشتراک‌گذاری اجتماعی و تجربه کاربری دارد. این مقاله دو روش اصلی تعریف metadata را بررسی می‌کند: استفاده از آبجکت ثابت metadata و تابع داینامیک generateMetadata.

Continue