كيفية تكوين Babel في Next.js

يتضمن 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، وإلا سيتم إيقاف تقسيم الكود في webpack.