الفرق بين المراجعتين ل"Next.js/supported browsers features"
< Next.js
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة وتدقيق) |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المتصفحات والميزات المدعومة في Next.js}}</noinclude> | <noinclude>{{DISPLAYTITLE:المتصفحات والميزات المدعومة في Next.js}}</noinclude> | ||
| − | تدعم Next.js المتصفح IE11 وجميع المتصفحات الحديثة | + | تدعم Next.js المتصفح IE11 وجميع المتصفحات الحديثة مثل Edge و Firefox و Chrome و Safari و Opera وغيرها دون الحاجة إلى أية تهيئة إضافية. |
| − | == | + | == توفير دعم لمختلف المتصفحات == |
تدفع Next.js صراحةً بشيفرات موائمة polyfills لازمة لدعم المتصفح IE11 كما تدفع بشيفرات موائمة مستخدمة على نطاق واسع بما فيها: | تدفع Next.js صراحةً بشيفرات موائمة polyfills لازمة لدعم المتصفح IE11 كما تدفع بشيفرات موائمة مستخدمة على نطاق واسع بما فيها: | ||
| − | * [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]: يستبدل حزمة 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 شيفرات الموائمة هذه للمتصفحات التي تحتاجها، بينما لن تراها في بقية الحالات. | إن احتوت أية اعتمادية من اعتمادياتك على هذه الشيفرات فستُحذف تلقائيًا من نسخة الإنتاج لتفادي التكرار. ولتقليل حجم التجميعات، تُحمِّل Next.js شيفرات الموائمة هذه للمتصفحات التي تحتاجها، بينما لن تراها في بقية الحالات. | ||
| − | + | == شيفرات الموائمة من جانب الخادم == | |
تدفع Next.js بالدالة <code>()fetch</code> لموائمة الشيفرة في بيئة عمل على الخادم بالإضافة إلى بيئة العميل. وبإمكانك استخدام <code>()fetch</code> في الشيفرة التي تنفذها على الخادم (مثل <code>getStaticProps</code> أو <code>getServerSideProps</code>) دون الحاجة لاستخدام شيفرات موائمة مثل <code>isomorphic-unfetch</code> أو <code>node-fetch</code>. | تدفع Next.js بالدالة <code>()fetch</code> لموائمة الشيفرة في بيئة عمل على الخادم بالإضافة إلى بيئة العميل. وبإمكانك استخدام <code>()fetch</code> في الشيفرة التي تنفذها على الخادم (مثل <code>getStaticProps</code> أو <code>getServerSideProps</code>) دون الحاجة لاستخدام شيفرات موائمة مثل <code>isomorphic-unfetch</code> أو <code>node-fetch</code>. | ||
| سطر 17: | سطر 17: | ||
إن احتاجت شيفرتك أو أية اعتمادية من اعتماديات npm إلى ميزات لا يدعمها المتصفح المستهدف، فلا بد من موائمة الشيفرة بنفسك. عليك في هذه الحالات إضافة عبارة إدراج import (من المستوى الأعلى) لشيفرة الموائمة المحددة التي تحتاجها في [[Next.js/custom app|تطبيقك المخصص]] أو في المكوِّن المطلوب. | إن احتاجت شيفرتك أو أية اعتمادية من اعتماديات npm إلى ميزات لا يدعمها المتصفح المستهدف، فلا بد من موائمة الشيفرة بنفسك. عليك في هذه الحالات إضافة عبارة إدراج import (من المستوى الأعلى) لشيفرة الموائمة المحددة التي تحتاجها في [[Next.js/custom app|تطبيقك المخصص]] أو في المكوِّن المطلوب. | ||
| − | == دعم ميزات JavaScript | + | == دعم ميزات JavaScript الحديثة == |
تتيح Next.js استخدام آخر ميزات صدرت للغة JavaScript. إذ تدعم إضافة إلى ميزات ES6 ما يلي: | تتيح Next.js استخدام آخر ميزات صدرت للغة JavaScript. إذ تدعم إضافة إلى ميزات ES6 ما يلي: | ||
| − | * الدوال غير المتزامنة ودوال الانتظار [[JavaScript/await|Async/await]] الإصدار | + | * الدوال غير المتزامنة ودوال الانتظار [[JavaScript/await|Async/await]] الإصدار ES2017 من JavaScript |
| − | * [https://github.com/tc39/proposal-object-rest-spread Object Rest/Spread Properties] الإصدار | + | * [https://github.com/tc39/proposal-object-rest-spread Object Rest/Spread Properties] الإصدار ES2018 من JavaScript |
| − | * دالة <code>()import</code> الديناميكية [https://github.com/tc39/proposal-dynamic-import ()Dynamic import] الإصدار | + | * دالة <code>()import</code> الديناميكية [https://github.com/tc39/proposal-dynamic-import ()Dynamic import] الإصدار ES2020 من JavaScript |
| − | * | + | * التسلسل الاختياري [https://academy.hsoub.com/programming/javascript/%D8%A7%D9%84%D8%AA%D8%B3%D9%84%D8%B3%D9%84-%D8%A7%D9%84%D8%A7%D8%AE%D8%AA%D9%8A%D8%A7%D8%B1%D9%8A-%D9%84%D9%84%D9%88%D8%B5%D9%88%D9%84-%D9%84%D8%AE%D8%A7%D8%B5%D9%8A%D8%A7%D8%AA-%D9%83%D8%A7%D8%A6%D9%86-%D9%81%D9%8A-%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-r1007/ Optional Chaining] الإصدار ES2020 من JavaScript |
| − | * | + | * عامل الاستبدال اللاغي [https://academy.hsoub.com/programming/javascript/%D8%B9%D8%A7%D9%85%D9%84-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%A8%D8%AF%D8%A7%D9%84-%D8%A7%D9%84%D9%84%D8%A7%D8%BA%D9%8A-%D8%A7%D9%84%D8%AC%D8%AF%D9%8A%D8%AF-%D9%81%D9%8A-%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-r1005/ Nullish Coalescing] الإصدار ES2020 من JavaScript |
* حقول الأصناف [https://github.com/tc39/proposal-class-fields Class Fields] والخاصيات الساكنة [https://github.com/tc39/proposal-static-class-features Static Properties] (جزء من اقتراحات المرحلة 3). | * حقول الأصناف [https://github.com/tc39/proposal-class-fields Class Fields] والخاصيات الساكنة [https://github.com/tc39/proposal-static-class-features Static Properties] (جزء من اقتراحات المرحلة 3). | ||
* وغيرها الكثير. | * وغيرها الكثير. | ||
| − | + | == دعم ميزات TypeScript == | |
| − | تدعم Next.js اللغة TypeScript بميزات مدمجة معها. اطلع على [[Next.js/typescript|الصفحة]] التي توثق هذا الموضوع. | + | تدعم Next.js اللغة [[TypeScript]] بميزات مدمجة معها. اطلع على [[Next.js/typescript|الصفحة]] التي توثق هذا الموضوع. |
| − | + | == تخصيص إعدادات ناقل الشيفرة Babel == | |
يمكنك الاطلاع على الموضوع بصورة أوسع في [[Next.js/customizing babel config|الصفحة الخاصة بتهيئة Babel]]. | يمكنك الاطلاع على الموضوع بصورة أوسع في [[Next.js/customizing babel config|الصفحة الخاصة بتهيئة Babel]]. | ||
مراجعة 16:14، 2 أغسطس 2022
تدعم Next.js المتصفح IE11 وجميع المتصفحات الحديثة مثل Edge و Firefox و Chrome و Safari و Opera وغيرها دون الحاجة إلى أية تهيئة إضافية.
توفير دعم لمختلف المتصفحات
تدفع Next.js صراحةً بشيفرات موائمة polyfills لازمة لدعم المتصفح IE11 كما تدفع بشيفرات موائمة مستخدمة على نطاق واسع بما فيها:
- ()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 إلى ميزات لا يدعمها المتصفح المستهدف، فلا بد من موائمة الشيفرة بنفسك. عليك في هذه الحالات إضافة عبارة إدراج import (من المستوى الأعلى) لشيفرة الموائمة المحددة التي تحتاجها في تطبيقك المخصص أو في المكوِّن المطلوب.
دعم ميزات 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 توثيق الرسمي