Babel

يضمّن Next.js الإعداد المسبق next/babel لتطبيقك، والذي يتضمن كل ما تحتاجه لتجميع تطبيقات React والشيفرة من جانب الخادم. ولكن إذا كنت ترغب في توسيع تكوينات Babel الافتراضية، فهذا ممكن أيضًا.

إضافة الإعدادات المسبقة والإضافات (Plugins)

للبدء، تحتاج فقط إلى تعريف ملف .babelrc (أو babel.config.js) في الدليل الجذري لمشروعك. إذا تم العثور على مثل هذا الملف، فسيتم اعتباره مصدر الحقيقة، وبالتالي يحتاج إلى تعريف ما يحتاجه Next.js أيضًا، وهو الإعداد المسبق next/babel.

إليك مثال لملف .babelrc:

{
  "presets": ["next/babel"],
  "plugins": []
}

يمكنك إلقاء نظرة على هذا الملف لمعرفة المزيد عن الإعدادات المسبقة المضمنة في next/babel.

لإضافة إعدادات مسبقة/إضافات بدون تكوينها، يمكنك القيام بذلك بهذه الطريقة:

{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}

تخصيص الإعدادات المسبقة والإضافات

لإضافة إعدادات مسبقة/إضافات مع تكوين مخصص، قم بذلك على الإعداد المسبق next/babel كما يلي:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}

لمعرفة المزيد حول الخيارات المتاحة لكل تكوين، قم بزيارة موقع توثيق Babel.

معلومة مفيدة:

• يستخدم Next.js إصدار Node.js الحالي لعمليات التجميع من جانب الخادم.
• يجب الحفاظ على خيار modules في "preset-env" على false، وإلا سيتم إيقاف تقسيم الشيفرة (code splitting) في webpack.