الفرق بين المراجعتين لصفحة: «Next.js/supported browsers features»
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المتصفحات والميزات المدعومة في Next.js}}</noinclude> | <noinclude>{{DISPLAYTITLE:المتصفحات والميزات المدعومة في Next.js}}</noinclude> | ||
تدعم Next.js | تدعم Next.js المتصفحات الحديثة دون الحاجة إلى أية تهيئة إضافية وهي: | ||
* Chrome 64+ | |||
* Edge 79+ | |||
* Firefox 67+ | |||
* Opera 51+ | |||
* Safari 12+ | |||
== توفير دعم لمختلف المتصفحات == | == توفير دعم لمختلف المتصفحات == | ||
تدفع Next.js صراحةً بشيفرات موائمة polyfills | إن أردت استهداف إصدارات أو ميزات محددة من المتصفحات، توفر Next.js دعمًا لإضافة ضبط قائمة المتصفحات <code>[https://browsersl.ist/ browserslist]</code> ضمن الملف <code>package.json</code>، وتستخدم Next.js القائمة الافتراضية التالية:<syntaxhighlight lang="json"> | ||
{ | |||
"browserslist": [ | |||
"chrome 64", | |||
"edge 79", | |||
"firefox 67", | |||
"opera 51", | |||
"safari 12" | |||
] | |||
} | |||
</syntaxhighlight> | |||
== توفير شيفرات الموائمة polyfills == | |||
تدفع Next.js صراحةً [https://github.com/vercel/next.js/blob/canary/packages/next-polyfill-nomodule/src/index.js بشيفرات موائمة polyfills مستخدمة على نطاق واسع] بما فيها: | |||
* [https://academy.hsoub.com/programming/javascript/%D8%A7%D8%B3%D8%AA%D8%B9%D9%85%D8%A7%D9%84%D8%A7%D8%AA-%D9%85%D8%AA%D9%82%D8%AF%D9%85%D8%A9-%D9%84%D9%84%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A9-fetch-%D9%81%D9%8A-%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-r1297/ ()fetch]: يستبدل <code>whatwg-fetch</code> و <code>unfetch</code>. | *[https://academy.hsoub.com/programming/javascript/%D8%A7%D8%B3%D8%AA%D8%B9%D9%85%D8%A7%D9%84%D8%A7%D8%AA-%D9%85%D8%AA%D9%82%D8%AF%D9%85%D8%A9-%D9%84%D9%84%D9%88%D8%A7%D8%AC%D9%87%D8%A9-%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D9%8A%D8%A9-fetch-%D9%81%D9%8A-%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-r1297/ ()fetch]: يستبدل <code>whatwg-fetch</code> و <code>unfetch</code>. | ||
* [https://academy.hsoub.com/programming/javascript/%D9%83%D8%A7%D8%A6%D9%86%D8%A7%D8%AA-url-%D9%81%D9%8A-%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-r1298/ URL]: يستبدل حزمة url (في واجهة Node.js البرمجية ). | *[https://academy.hsoub.com/programming/javascript/%D9%83%D8%A7%D8%A6%D9%86%D8%A7%D8%AA-url-%D9%81%D9%8A-%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-r1298/ URL]: يستبدل [[Node.js/url|حزمة url]] (في واجهة Node.js البرمجية ). | ||
* [[JavaScript/Object/assign|()Object.assign]]: يستبدل <code>object-assign</code> و <code>object.assign</code> و <code>core-js/object/assign</code>. | *[[JavaScript/Object/assign|()Object.assign]]: يستبدل <code>object-assign</code> و <code>object.assign</code> و <code>core-js/object/assign</code>. | ||
إن احتوت أية | إن احتوت شيفرتك أية شيفرة موائمة من هذه الشيفرات فستُحذف تلقائيًا من نسخة الإنتاج لتفادي التكرار. ولتقليل حجم التجميعات، تُحمِّل Next.js شيفرات الموائمة هذه للمتصفحات التي تحتاجها، بينما لن تراها في بقية الحالات. | ||
== شيفرات الموائمة من جانب الخادم == | == شيفرات الموائمة من جانب الخادم == | ||
| سطر 15: | سطر 34: | ||
== شيفرات موائمة مخصصة == | == شيفرات موائمة مخصصة == | ||
إن احتاجت شيفرتك أو أية اعتمادية من اعتماديات npm إلى ميزات لا يدعمها المتصفح | إن احتاجت شيفرتك أو أية اعتمادية من اعتماديات npm إلى ميزات لا يدعمها المتصفح المستهدف (مثل متصفح IE 11)، فلا بد من موائمة الشيفرة بنفسك. عليك في هذه الحالات إضافة عبارة إدراج import (من المستوى الأعلى) لشيفرة الموائمة المحددة التي تحتاجها في [[Next.js/custom app|تطبيق App المخصص]] أو في المكوِّن المطلوب. | ||
== دعم ميزات JavaScript الحديثة == | == دعم ميزات JavaScript الحديثة == | ||
مراجعة 16:36، 4 يناير 2023
تدعم Next.js المتصفحات الحديثة دون الحاجة إلى أية تهيئة إضافية وهي:
- Chrome 64+
- Edge 79+
- Firefox 67+
- Opera 51+
- Safari 12+
توفير دعم لمختلف المتصفحات
إن أردت استهداف إصدارات أو ميزات محددة من المتصفحات، توفر Next.js دعمًا لإضافة ضبط قائمة المتصفحات browserslist ضمن الملف package.json، وتستخدم Next.js القائمة الافتراضية التالية:
{
"browserslist": [
"chrome 64",
"edge 79",
"firefox 67",
"opera 51",
"safari 12"
]
}
توفير شيفرات الموائمة polyfills
تدفع Next.js صراحةً بشيفرات موائمة polyfills مستخدمة على نطاق واسع بما فيها:
- ()fetch: يستبدل
whatwg-fetchوunfetch. - URL: يستبدل حزمة url (في واجهة Node.js البرمجية ).
- ()Object.assign: يستبدل
object-assignوobject.assignوcore-js/object/assign.
إن احتوت شيفرتك أية شيفرة موائمة من هذه الشيفرات فستُحذف تلقائيًا من نسخة الإنتاج لتفادي التكرار. ولتقليل حجم التجميعات، تُحمِّل Next.js شيفرات الموائمة هذه للمتصفحات التي تحتاجها، بينما لن تراها في بقية الحالات.
شيفرات الموائمة من جانب الخادم
تدفع Next.js بالدالة ()fetch لموائمة الشيفرة في بيئة عمل على الخادم بالإضافة إلى بيئة العميل. وبإمكانك استخدام ()fetch في الشيفرة التي تنفذها على الخادم (مثل getStaticProps أو getServerSideProps) دون الحاجة لاستخدام شيفرات موائمة مثل isomorphic-unfetch أو node-fetch.
شيفرات موائمة مخصصة
إن احتاجت شيفرتك أو أية اعتمادية من اعتماديات npm إلى ميزات لا يدعمها المتصفح المستهدف (مثل متصفح IE 11)، فلا بد من موائمة الشيفرة بنفسك. عليك في هذه الحالات إضافة عبارة إدراج import (من المستوى الأعلى) لشيفرة الموائمة المحددة التي تحتاجها في تطبيق App المخصص أو في المكوِّن المطلوب.
دعم ميزات JavaScript الحديثة
تتيح Next.js استخدام آخر ميزات صدرت للغة JavaScript. إذ تدعم إضافة إلى ميزات ES6 ما يلي:
- الدوال غير المتزامنة ودوال الانتظار Async/await الإصدار ES2017 من JavaScript
- Object Rest/Spread Properties الإصدار ES2018 من JavaScript
- دالة
()importالديناميكية ()Dynamic import الإصدار ES2020 من JavaScript - التسلسل الاختياري Optional Chaining الإصدار ES2020 من JavaScript
- عامل الاستبدال اللاغي Nullish Coalescing الإصدار ES2020 من JavaScript
- حقول الأصناف Class Fields والخاصيات الساكنة Static Properties (جزء من اقتراحات المرحلة 3).
- وغيرها الكثير.
دعم ميزات TypeScript
تدعم Next.js اللغة TypeScript بميزات مدمجة معها. اطلع على الصفحة التي توثق هذا الموضوع.
تخصيص إعدادات ناقل الشيفرة Babel
يمكنك الاطلاع على الموضوع بصورة أوسع في الصفحة الخاصة بتهيئة Babel.
المصادر
- الصفحة Supported Browsers and Features في Next.js توثيق الرسمي