ملف next.config.js

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

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* خيارات التكوين هنا */
}

module.exports = nextConfig

وحدات ECMAScript

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

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

// @ts-check

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* خيارات التكوين هنا */
}

export default nextConfig

معلومة مفيدة: امتدادات next.config مثل .cjs أو .cts أو .mts غير مدعومة حاليًا.

التكوين كدالة

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

// @ts-check

export default (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* خيارات التكوين هنا */
  }
  return nextConfig
}

التكوين غير المتزامن

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

// @ts-check

module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* خيارات التكوين هنا */
  }
  return nextConfig
}

المرحلة

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

// @ts-check

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

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* خيارات التكوين الخاصة بالتنمية فقط هنا */
    }
  }

  return {
    /* خيارات التكوين لجميع المراحل باستثناء التنمية هنا */
  }
}

TypeScript

إذا كنت تستخدم TypeScript في مشروعك، يمكنك استخدام next.config.ts لاستخدام TypeScript في تكوينك:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  /* خيارات التكوين هنا */
}

export default nextConfig

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

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

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

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

اختبار الوحدات (تجريبي)

بدءًا من Next.js 15.1، تحتوي حزمة next/experimental/testing/server على أدوات لمساعدة في اختبار وحدات ملفات next.config.js.

تقوم دالة unstable_getResponseFromNextConfig بتشغيل دوال headers، redirects، و rewrites من next.config.js مع معلومات الطلب المقدمة وإرجاع NextResponse مع نتائج التوجيه.

الاستجابة من unstable_getResponseFromNextConfig تأخذ في الاعتبار حقول next.config.js فقط ولا تأخذ في الاعتبار middleware أو مسارات نظام الملفات، لذلك قد تكون النتيجة في الإنتاج مختلفة عن اختبار الوحدة.

import {
  getRedirectUrl,
  unstable_getResponseFromNextConfig,
} from 'next/experimental/testing/server'

const response = await unstable_getResponseFromNextConfig({
  url: 'https://nextjs.org/test',
  nextConfig: {
    async redirects() {
      return [{ source: '/test', destination: '/test2', permanent: false }]
    },
  },
})
expect(response.status).toEqual(307)
expect(getRedirectUrl(response)).toEqual('https://nextjs.org/test2')