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

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

next.config.js
/** @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
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
}

export default nextConfig

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

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

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

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

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

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 لضغط المحتوى المعروض والملفات الثابتة، وهو يعمل فقط مع هدف الخادم. تعلم المزيد حول هذا الموضوع هنا.

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

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

distDir

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

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

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

eslint

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

exportPathMap

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

generateBuildId

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

generateEtags

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

الرؤوس (headers)

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

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

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

الصور

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

onDemandEntries

تكوين كيفية تصريف Next.js والحفاظ في الذاكرة للصفحات التي تم إنشاؤها في وضع التطوير.

الإخراج (output)

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

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

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

رأس poweredByHeader

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

productionBrowserSourceMaps

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

reactStrictMode

أصبح وقت تشغيل Next.js بالكامل متوافقًا مع الوضع الصارم (Strict Mode). تعلم كيفية الاشتراك

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

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

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

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

تكوين وقت التشغيل (Runtime Config)

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

trailingSlash

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

transpilePackages

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

turbo

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

TypeScript

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

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

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

webpack

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

webVitalsAttribution

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