الفرق بين المراجعتين ل"Next.js/faq"
| سطر 3: | سطر 3: | ||
== هل تطبيقات Next.js جاهزة للإنتاج والنشر؟ == | == هل تطبيقات Next.js جاهزة للإنتاج والنشر؟ == | ||
| − | نعم! | + | نعم! وتُستخدم في العديد من مواقع الويب ذائعة الصيت في العالم. [https://nextjs.org/showcase ألق نظرة على بعضها]. |
| − | == كيف | + | == كيف سأحضِر البيانات في Next.js؟ == |
تزوّدك Next.js بطرق عديدة وفقًا لمتطلباتك. إذ يمكنك استخدام: | تزوّدك Next.js بطرق عديدة وفقًا لمتطلباتك. إذ يمكنك استخدام: | ||
| سطر 18: | سطر 18: | ||
تقدم Next.js موجّهًا مدمجًا للأسباب التالية: | تقدم Next.js موجّهًا مدمجًا للأسباب التالية: | ||
| − | * | + | * اعتمادها على موجِّه يعتمد فكرة نظام الملفات مما يقلل الإعدادات اللازمة. |
| − | * | + | * لدعم التوجه السطحي shallow routing الذي يسمح بتغيير عنوان URL دون تنفيذ أية توابع إضافية لإحضار البيانات. |
* لأن الوجهات تُحمّل دائمًا بالأسلوب الكسول أو المحدود lazy. | * لأن الوجهات تُحمّل دائمًا بالأسلوب الكسول أو المحدود lazy. | ||
| − | اطلع على [[Next.js/migrating|توثيق الانتقال من React Router | + | اطلع على [[Next.js/migrating|توثيق]] الانتقال من React Router إلى Next.js إن كنت بصدد الانتقال. |
== هل يمكن استخدام Next.js مع مكتبة JavaScript التي أفضلها؟ == | == هل يمكن استخدام Next.js مع مكتبة JavaScript التي أفضلها؟ == | ||
| سطر 28: | سطر 28: | ||
== هل يمكنني استخدام Next.js مع GraphQL؟ == | == هل يمكنني استخدام Next.js مع GraphQL؟ == | ||
| − | نعم! اطلع على الأمثلة المخصصة مع [https://github.com/vercel/next.js/tree/canary/examples/with-apollo Apollo] | + | نعم! اطلع على الأمثلة المخصصة مع [https://github.com/vercel/next.js/tree/canary/examples/with-apollo Apollo] وكذلك [https://github.com/vercel/next.js/tree/canary/examples/api-routes-graphql وجهات API مع GraphQL]. |
== هل يمكنني استخدام Next.js مع Redux? == | == هل يمكنني استخدام Next.js مع Redux? == | ||
| سطر 36: | سطر 36: | ||
نعم! وإليك [https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app مثالًا]. | نعم! وإليك [https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app مثالًا]. | ||
| − | == هل يمكن استخدام شبكة | + | == هل يمكن استخدام شبكة إيصال المحتوى CDN لتخديم الموجودات الساكنة؟ == |
| − | نعم! عندما تنشر مشروع Next.js على Vercel ستتعرف شبكة Edge تلقائيًا على الموجودات الساكنة. أما إن | + | نعم! عندما تنشر مشروع Next.js على Vercel ستتعرف شبكة Edge تلقائيًا على الموجودات الساكنة. أما إن استضفت التطبيق بنفسك، فعليك أن تطلع على طريقة [[Next.js/next.config.js|الإعداد اليدوي لبادئات التسمية لملفات الموجودات الساكنة]]. |
== كيف أستطيع تغيير الإعداد الداخلي للمحزِّم webpack؟ == | == كيف أستطيع تغيير الإعداد الداخلي للمحزِّم webpack؟ == | ||
| − | لن تحتاج في معظم الحالات إلى ضبط الإعدادات يدويًا في Next.js لأنها تهيئ تلقائيًا webpack. لكن عندما تحتاج إلى تحكم أكبر في | + | لن تحتاج في معظم الحالات إلى ضبط الإعدادات يدويًا في Next.js لأنها تهيئ تلقائيًا webpack. لكن عندما تحتاج إلى تحكم أكبر في حالات متقدمة، عد إلى [[Next.js/next.config.js|توثيق الإعدادات المخصصة]]. |
== ما الذي ألهم Next.js? == | == ما الذي ألهم Next.js? == | ||
| − | إن الكثير من الأهداف التي عزمنا على إنجازها كانت تلك الموجودة في قائمة [https://rauchg.com/2014/7-principles-of-rich-web-applications المبادئ السبعة لتطبيقات الويب الغنية] التي أعدها | + | إن الكثير من الأهداف التي عزمنا على إنجازها كانت تلك الموجودة في قائمة [https://rauchg.com/2014/7-principles-of-rich-web-applications المبادئ السبعة لتطبيقات الويب الغنية] التي أعدها Guillermo Rauch. كما أن سهولة استخدام PHP كان ولا يزال ملهمًا عظيمًا. إذ نعتقد أن Next.js هو بديل مناسب في الكثير من الحالات التي تُضطر فيها إلى استخدام PHP لإنتاج خرج HTML. استفدنا على خلاف PHP من مزايا نظام وحدات ES6 وكيف تُصدّر كل صفحة مكوّنًا أو دالة يمكن إدراجها للتحقق الكسول أو الاختبارات. |
| − | |||
| − | كما أن سهولة استخدام PHP كان ولا يزال ملهمًا عظيمًا. إذ نعتقد أن Next.js هو بديل مناسب في الكثير من الحالات التي تُضطر فيها إلى استخدام PHP لإنتاج خرج HTML. | ||
| − | |||
| − | استفدنا على خلاف PHP من مزايا نظام وحدات ES6 وكيف تُصدّر كل صفحة مكوّنًا أو دالة يمكن إدراجها للتحقق الكسول أو الاختبارات. | ||
عندما كنا نبحث عن خيارات لتصيير React من جانب الخادم بأقل عدد ممكن من الخطوات، صادفنا <code>react-page</code> (ألغيت الآن)، وهو نهج اتبعه Jordan Walke مصمم React يشابه نهج Next.js. | عندما كنا نبحث عن خيارات لتصيير React من جانب الخادم بأقل عدد ممكن من الخطوات، صادفنا <code>react-page</code> (ألغيت الآن)، وهو نهج اتبعه Jordan Walke مصمم React يشابه نهج Next.js. | ||
مراجعة 07:52، 14 يوليو 2022
إليك بعض الأجوبة عن أكثر الأسئلة شيوعًا حول Next.js.
هل تطبيقات Next.js جاهزة للإنتاج والنشر؟
نعم! وتُستخدم في العديد من مواقع الويب ذائعة الصيت في العالم. ألق نظرة على بعضها.
كيف سأحضِر البيانات في Next.js؟
تزوّدك Next.js بطرق عديدة وفقًا لمتطلباتك. إذ يمكنك استخدام:
- التصيير من جانب العميل: وإحضار البيانات باستخدام
useEffectو SWR ضمن مكونات React. - التصيير من جانب الخادم: من خلال الدالة
getServersSideProps. - التوليد الساكن للموقع: من خلال الدالة
getStaticProps. - التجديد التلقائي الساكن: بإضافة الخاصية
revalidateإلىgetStaticProps.
راجع توثيق إحضار البيانات لمزيد من المعلومات.
لماذا تمتلك Next.js موجّهًا خاصًا بها؟
تقدم Next.js موجّهًا مدمجًا للأسباب التالية:
- اعتمادها على موجِّه يعتمد فكرة نظام الملفات مما يقلل الإعدادات اللازمة.
- لدعم التوجه السطحي shallow routing الذي يسمح بتغيير عنوان URL دون تنفيذ أية توابع إضافية لإحضار البيانات.
- لأن الوجهات تُحمّل دائمًا بالأسلوب الكسول أو المحدود lazy.
اطلع على توثيق الانتقال من React Router إلى Next.js إن كنت بصدد الانتقال.
هل يمكن استخدام Next.js مع مكتبة JavaScript التي أفضلها؟
نعم! وستجد مئات الأمثلة في معرض أمثلتنا على GitHub.
هل يمكنني استخدام Next.js مع GraphQL؟
نعم! اطلع على الأمثلة المخصصة مع Apollo وكذلك وجهات API مع GraphQL.
هل يمكنني استخدام Next.js مع Redux?
نعم! إليك مثالًا باستخدام Redux ومثالًا باستخدام thunk.
هل يمكنني استخدام Next.js لتصميم تطبيقات ويب تقدمية PWA؟
نعم! وإليك مثالًا.
هل يمكن استخدام شبكة إيصال المحتوى CDN لتخديم الموجودات الساكنة؟
نعم! عندما تنشر مشروع Next.js على Vercel ستتعرف شبكة Edge تلقائيًا على الموجودات الساكنة. أما إن استضفت التطبيق بنفسك، فعليك أن تطلع على طريقة الإعداد اليدوي لبادئات التسمية لملفات الموجودات الساكنة.
كيف أستطيع تغيير الإعداد الداخلي للمحزِّم webpack؟
لن تحتاج في معظم الحالات إلى ضبط الإعدادات يدويًا في Next.js لأنها تهيئ تلقائيًا webpack. لكن عندما تحتاج إلى تحكم أكبر في حالات متقدمة، عد إلى توثيق الإعدادات المخصصة.
ما الذي ألهم Next.js?
إن الكثير من الأهداف التي عزمنا على إنجازها كانت تلك الموجودة في قائمة المبادئ السبعة لتطبيقات الويب الغنية التي أعدها Guillermo Rauch. كما أن سهولة استخدام PHP كان ولا يزال ملهمًا عظيمًا. إذ نعتقد أن Next.js هو بديل مناسب في الكثير من الحالات التي تُضطر فيها إلى استخدام PHP لإنتاج خرج HTML. استفدنا على خلاف PHP من مزايا نظام وحدات ES6 وكيف تُصدّر كل صفحة مكوّنًا أو دالة يمكن إدراجها للتحقق الكسول أو الاختبارات.
عندما كنا نبحث عن خيارات لتصيير React من جانب الخادم بأقل عدد ممكن من الخطوات، صادفنا react-page (ألغيت الآن)، وهو نهج اتبعه Jordan Walke مصمم React يشابه نهج Next.js.
المصادر
- الصفحة Frequently Asked questions من توثيق Next.js الرسمي.