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

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

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

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

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

next.config.js

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

دالة webpack تنفذ مرتين، مرة للخادم ومرة للعميل. هذا يسمح لك بالتمييز بين تهيئة العميل والخادم باستخدام خاصية 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 فقط.

nextRuntime

On this page

`nextRuntime`