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.