خيارات ملف 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.

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

assetPrefix

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

basePath

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

ضغط

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

crossOrigin

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

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

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

distDir

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

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

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

eslint

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

exportPathMap

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

generateBuildId

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

generateEtags

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

رؤوس (headers)

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

خيارات وكيل HTTP

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

الصور

التخصيص المتقدم لأداة تحميل `next/image`

instrumentationHook

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

onDemandEntries

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

optimizePackageImports

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

الإخراج (output)

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

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

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

poweredByHeader

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

productionBrowserSourceMaps

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

reactStrictMode

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

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

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

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

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

تهيئة وقت التشغيل

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

trailingSlash

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

transpilePackages

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

توربو

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

TypeScript

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

استيراد من عناوين URL (urlImports)

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

webpack

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

webVitalsAttribution

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