خيارات ملف next.config.js

يمكن تكوين Next.js من خلال ملف next.config.js في جذر دليل المشروع (على سبيل المثال، بجانب package.json) مع تصدير افتراضي.

next.config.js
// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
}

module.exports = nextConfig

next.config.js هو وحدة Node.js عادية، وليس ملف JSON. يتم استخدامه بواسطة خادم Next.js ومراحل البناء، ولا يتم تضمينه في بناء المتصفح.

إذا كنت بحاجة إلى وحدات ECMAScript، يمكنك استخدام next.config.mjs:

next.config.mjs
// @ts-check

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
}

export default nextConfig

يمكنك أيضًا استخدام دالة:

next.config.mjs
// @ts-check

export default (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

منذ Next.js 12.1.0، يمكنك استخدام دالة غير متزامنة:

next.config.js
// @ts-check

module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

phase هو السياق الحالي الذي يتم فيه تحميل التكوين. يمكنك رؤية المراحل المتاحة. يمكن استيراد المراحل من next/constants:

// @ts-check

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* development only config options here */
    }
  }

  return {
    /* config options for all phases except development here */
  }
}

الأسطر المعلقة هي المكان الذي يمكنك وضع التكوينات المسموح بها بواسطة next.config.js، والتي تم تعريفها في هذا الملف.

ومع ذلك، لا يوجد أي من التكوينات مطلوبًا، وليس من الضروري فهم ما يفعله كل تكوين. بدلاً من ذلك، ابحث عن الميزات التي تحتاج إلى تمكينها أو تعديلها في هذا القسم وسوف تظهر لك ما يجب القيام به.

تجنب استخدام ميزات JavaScript الجديدة غير المتوفرة في إصدار Node.js المستهدف. لن يتم تحليل next.config.js بواسطة Webpack أو Babel أو TypeScript.

توثق هذه الصفحة جميع خيارات التكوين المتاحة:

دليل appDir

تمكين موجه التطبيق (App Router) لاستخدام التخطيطات (layouts)، البث (streaming)، والمزيد.

assetPrefix

تعلم كيفية استخدام خيار التكوين assetPrefix لضبط شبكة توصيل المحتوى (CDN) الخاصة بك.

basePath

استخدم `basePath` لنشر تطبيق Next.js تحت مسار فرعي ضمن نطاق.

ضغط

يوفر Next.js ضغط gzip لضغط المحتوى المعروض والملفات الثابتة، ويعمل فقط مع هدف الخادم. تعلم المزيد عنه هنا.

crossOrigin

استخدم خيار `crossOrigin` لإضافة وسم crossOrigin على وسوم `script` التي يتم إنشاؤها بواسطة `next/script`.

مؤشرات التطوير (devIndicators)

تتضمن الصفحات المُحسنة مؤشرًا لإعلامك إذا كانت تُحسن بشكل ثابت. يمكنك إلغاء تفعيله هنا.

distDir

تعيين دليل بناء مخصص للاستخدام بدلاً من الدليل الافتراضي .next.

متغيرات البيئة (env)

تعلم كيفية إضافة متغيرات البيئة والوصول إليها في تطبيق Next.js أثناء وقت البناء.

eslint

يقوم Next.js بالإبلاغ عن أخطاء وتحذيرات ESLint أثناء عمليات البناء بشكل افتراضي. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.

exportPathMap

تخصيص الصفحات التي سيتم تصديرها كملفات HTML عند استخدام `next export`.

generateBuildId

تكوين معرف البناء الذي يُستخدم لتحديد البناء الحالي الذي يتم تقديم تطبيقك من خلاله.

generateEtags

يقوم Next.js بإنشاء علامات etag افتراضيًا لكل صفحة. تعرف على المزيد حول كيفية تعطيل إنشاء etag هنا.

الرؤوس (headers)

إضافة رؤوس HTTP مخصصة لتطبيق Next.js الخاص بك.

خيارات وكيل HTTP (httpAgentOptions)

سيقوم Next.js تلقائيًا باستخدام HTTP Keep-Alive افتراضيًا. تعلم المزيد حول كيفية تعطيل HTTP Keep-Alive هنا.

الصور

التخصيص المتقدم لمحمل الصور `next/image`

cacheHandler

تكوين التخزين المؤقت لـ Next.js المستخدم لتخزين وإعادة التحقق من البيانات لاستخدام أي خدمة خارجية مثل Redis أو Memcached أو غيرها.

instrumentationHook

استخدم خيار instrumentationHook لإعداد أدوات القياس في تطبيق Next.js الخاص بك.

تسجيل البيانات (logging)

تكوين كيفية تسجيل عمليات جلب البيانات في وحدة التحكم عند تشغيل Next.js في وضع التطوير.

mdxRs

استخدم مترجم Rust الجديد لتحويل ملفات MDX في موجه التطبيق (App Router).

onDemandEntries

تكوين كيفية تصرف Next.js في التخلص من الصفحات أو الاحتفاظ بها في الذاكرة أثناء التطوير.

optimizePackageImports

مرجع API لخيار تكوين `optimizePackageImports` في Next.js

output

يتتبع Next.js تلقائيًا الملفات المطلوبة لكل صفحة لتمكين نشر تطبيقك بسهولة. تعرف هنا على كيفية عمل هذه الميزة.

ملحقات الصفحة (pageExtensions)

توسيع ملحقات الصفحة الافتراضية المستخدمة من قبل Next.js عند تحليل الصفحات في موجه الصفحات (Pages Router).

التصيير الجزئي المسبق (تجريبي)

تعلم كيفية تمكين ميزة التصيير الجزئي المسبق (التجريبية) في Next.js 14.

رأس poweredByHeader

Next.js سيضيف رأس `x-powered-by` افتراضيًا. تعلم كيفية إلغاء تفعيله هنا.

productionBrowserSourceMaps

تمكين إنشاء خرائط المصدر (source maps) للمتصفح أثناء بناء الإنتاج.

reactStrictMode

بيئة تشغيل Next.js كاملة متوافقة الآن مع الوضع الصارم (Strict Mode)، تعلم كيفية التفعيل

إعادة التوجيه (redirects)

إضافة إعادة التوجيه إلى تطبيق Next.js الخاص بك.

إعادة التوجيه (rewrites)

إضافة إعادة التوجيه إلى تطبيق Next.js الخاص بك.

serverActions

تكوين سلوك إجراءات الخادم (Server Actions) في تطبيق Next.js الخاص بك.

serverComponentsExternalPackages

استثناء تبعيات محددة من تجميع مكونات الخادم واستخدام `require` الأصلي في Node.js.

أوقات التقادم (تجريبي)

تعلم كيفية تجاوز وقت إبطال ذاكرة التخزين المؤقت لموجه العميل (Client Router Cache).

trailingSlash

تكوين صفحات Next.js للتعامل مع أو بدون شرطة مائلة نهائية.

transpilePackages

تحويل تلقائي وحزم التبعيات من الحزم المحلية (مثل مستودعات أحادية) أو من التبعيات الخارجية (`node_modules`).

turbo

تكوين Next.js مع خيارات خاصة بـ Turbopack

typedRoutes

تمكين الدعم التجريبي للروابط ذات الأنواع الثابتة.

TypeScript

يبلغ Next.js عن أخطاء TypeScript بشكل افتراضي. تعلم هنا كيفية إلغاء تفعيل هذا السلوك.

استيراد من روابط URL

تكوين Next.js للسماح باستيراد وحدات من روابط خارجية (ميزة تجريبية).

webpack

تعلم كيفية تخصيص تهيئة webpack المستخدمة من قبل Next.js

خيار webVitalsAttribution

تعلم كيفية استخدام خيار webVitalsAttribution لتحديد مصدر مشكلات مؤشرات ويب الأساسية (Web Vitals).