المتصفحات المدعومة

يدعم Next.js المتصفحات الحديثة بدون أي تكوين إضافي.

Chrome 64+
Edge 79+
Firefox 67+
Opera 51+
Safari 12+

Browserslist

إذا كنت ترغب في استهداف متصفحات أو ميزات محددة، يدعم Next.js تكوين Browserslist في ملف package.json. يستخدم Next.js تكوين Browserslist التالي افتراضيًا:

package.json

{
  "browserslist": [
    "chrome 64",
    "edge 79",
    "firefox 67",
    "opera 51",
    "safari 12"
  ]
}

Polyfills

نقوم بحقن polyfills شائعة الاستخدام، بما في ذلك:

fetch() — بديل عن: whatwg-fetch و unfetch.
URL — بديل عن: حزمة url (واجهة برمجة تطبيقات Node.js).
Object.assign() — بديل عن: object-assign و object.assign و core-js/object/assign.

إذا كانت أي من التبعيات الخاصة بك تتضمن هذه الـ polyfills، فسيتم إزالتها تلقائيًا من بناء الإنتاج لتجنب التكرار.

بالإضافة إلى ذلك، لتقليل حجم الحزمة، سيقوم Next.js بتحميل هذه الـ polyfills فقط للمتصفحات التي تتطلبها. غالبية حركة المرور على الويب عالميًا لن تقوم بتنزيل هذه الـ polyfills.

Polyfills مخصصة

إذا كان الكود الخاص بك أو أي تبعيات خارجية من npm تتطلب ميزات غير مدعومة من قبل المتصفحات المستهدفة (مثل IE 11)، فأنت بحاجة إلى إضافة الـ polyfills بنفسك.

في هذه الحالة، يجب عليك إضافة استيراد على مستوى أعلى لـ polyfill محدد تحتاجه في مكون <App> المخصص أو المكون الفردي.

ميزات لغة جافا سكريبت

يسمح لك Next.js باستخدام أحدث ميزات جافا سكريبت بدون أي تكوين إضافي. بالإضافة إلى ميزات ES6، يدعم Next.js أيضًا:

Async/await (ES2017)
خاصية Object Rest/Spread (ES2018)
Dynamic import() (ES2020)
Optional Chaining (ES2020)
Nullish Coalescing (ES2020)
Class Fields و Static Properties (جزء من proposal المرحلة الثالثة)
والمزيد!

بالإضافة إلى fetch() على جانب العميل، يقوم Next.js بحقن fetch() في بيئة Node.js حيث لا تكون متوفرة بعد. يستخدم undici، نفس التنفيذ الذي تستخدمه Node.js نفسها. يمكنك استخدام fetch() في كود الخادم الخاص بك (مثل getStaticProps/getServerSideProps) بدون استخدام polyfills مثل isomorphic-unfetch أو node-fetch.

ميزات TypeScript

يحتوي Next.js على دعم مدمج لـ TypeScript. تعلم المزيد هنا.

تخصيص تكوين Babel (متقدم)

يمكنك تخصيص تكوين babel. تعلم المزيد هنا.