تهيئة Webpack المخصصة

من الجيد معرفة: التغييرات على تهيئة webpack لا تخضع لـ semver لذا تقدم على مسؤوليتك الخاصة

قبل المتابعة في إضافة تهيئة webpack مخصصة لتطبيقك، تأكد من أن Next.js لا يدعم بالفعل حالة الاستخدام الخاصة بك:

• استيراد CSS
• وحدات CSS
• استيراد Sass/SCSS
• وحدات Sass/SCSS
• تخصيص تهيئة babel

بعض الميزات المطلوبة بشكل شائع متوفرة كإضافات:

• @next/mdx
• @next/bundle-analyzer

لتمديد استخدامنا لـ webpack، يمكنك تعريف دالة تمدد تهيئته داخل next.config.js، كما يلي:

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // مهم: إرجاع التهيئة المعدلة
    return config
  },
}

يتم تنفيذ دالة webpack ثلاث مرات، مرتين للخادم (nodejs / edge runtime) ومرة للعميل. هذا يسمح لك بالتمييز بين تهيئة العميل والخادم باستخدام خاصية isServer.

الوسيط الثاني لدالة webpack هو كائن يحتوي على الخصائص التالية:

• buildId: String - معرف البناء، يستخدم كمعرف فريد بين البنائين.
• dev: Boolean - يشير إلى ما إذا كان التجميع سيتم في وضع التطوير.
• isServer: Boolean - تكون true لتجميع جانب الخادم، و false لتجميع جانب العميل.
• nextRuntime: String | undefined - وقت التشغيل المستهدف لتجميع جانب الخادم؛ إما "edge" أو "nodejs"، تكون undefined لتجميع جانب العميل.
• defaultLoaders: Object - محملات افتراضية مستخدمة داخليًا من قبل Next.js:
  • babel: Object - تهيئة babel-loader الافتراضية.

مثال على استخدام defaultLoaders.babel:

// مثال تهيئة لإضافة محمل يعتمد على babel-loader
// هذا المصدر مأخوذ من مصدر إضافة @next/mdx:
// https://github.com/vercel/next.js/tree/canary/packages/next-mdx
module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.mdx/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: '@mdx-js/loader',
          options: pluginOptions.options,
        },
      ],
    })

    return config
  },
}

nextRuntime

لاحظ أن isServer تكون true عندما يكون nextRuntime هو "edge" أو "nodejs"، nextRuntime "edge" مخصص حاليًا للبرمجيات الوسيطة ومكونات الخادم في وقت تشغيل edge فقط.