الفرق بين المراجعتين لصفحة: «Next.js/faq»

من موسوعة حسوب
لا ملخص تعديل
لا ملخص تعديل
سطر 3: سطر 3:


== هل تطبيقات Next.js جاهزة للإنتاج والنشر؟ ==
== هل تطبيقات Next.js جاهزة للإنتاج والنشر؟ ==
نعم! وتستخدم في العديد من مواقع الويب ذائعة الصيت في العالم. [https://nextjs.org/showcase ألق نظرة على بعضها].
نعم! وتُستخدم في العديد من مواقع الويب ذائعة الصيت في العالم. [https://nextjs.org/showcase ألق نظرة على بعضها].


== كيف سأحضر البيانات في Next.js؟ ==
== كيف سأحضِر البيانات في Next.js؟ ==
تزوّدك Next.js بطرق عديدة وفقًا لمتطلباتك. إذ يمكنك استخدام:
تزوّدك Next.js بطرق عديدة وفقًا لمتطلباتك. إذ يمكنك استخدام:


سطر 18: سطر 18:
تقدم Next.js موجّهًا مدمجًا للأسباب التالية:
تقدم Next.js موجّهًا مدمجًا للأسباب التالية:


* اعتمادهاّعلى موجًه يعتمد فكرة نظام الملفات مما يقلل الإعدادات اللازمة.
* اعتمادها على موجِّه يعتمد فكرة نظام الملفات مما يقلل الإعدادات اللازمة.
* لتدعم التوجه السطحي shallow routing الذي يسمح بتغيير عنوان URL دون تنفيذ أية توابع لإحضار البيانات.
* لدعم التوجه السطحي shallow routing الذي يسمح بتغيير عنوان URL دون تنفيذ أية توابع إضافية لإحضار البيانات.
* لأن الوجهات تُحمّل دائمًا بالأسلوب الكسول أو المحدود lazy.
* لأن الوجهات تُحمّل دائمًا بالأسلوب الكسول أو المحدود lazy.


اطلع على [[Next.js/migrating|توثيق الانتقال من React Router]] إلى Next.js إن كنت بصدد الانتقال.
اطلع على [[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/api-routes-graphql وجهات API مع GraphQL].
نعم! اطلع على الأمثلة المخصصة مع [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 لتخديم الموجودات الساكنة؟ ==
== هل يمكن استخدام شبكة إيصال المحتوى CDN لتخديم الموجودات الساكنة؟ ==
نعم! عندما تنشر مشروع Next.js على Vercel ستتعرف شبكة Edge تلقائيًا على الموجودات الساكنة. أما إن قمت باستضافة التطبيق بنفسك، فعليك أن تطلع على طريقة [[Next.js/next.config.js|الإعداد اليدوي لبادئات التسمية لملفات الموجودات الساكنة]].
نعم! عندما تنشر مشروع Next.js على Vercel ستتعرف شبكة Edge تلقائيًا على الموجودات الساكنة. أما إن استضفت التطبيق بنفسك، فعليك أن تطلع على طريقة [[Next.js/next.config.js|الإعداد اليدوي لبادئات التسمية لملفات الموجودات الساكنة]].


== كيف أستطيع تغيير الإعداد الداخلي للمحزِّم webpack؟ ==
== كيف أستطيع تغيير الإعداد الداخلي للمحزِّم webpack؟ ==
لن تحتاج في معظم الحالات إلى ضبط الإعدادات يدويًا في Next.js لأنها تهيئ تلقائيًا webpack. لكن عندما تحتاج إلى تحكم أكبر في حالا متقدمة، عد إلى [[Next.js/next.config.js|توثيق الإعدادات المخصصة]].
لن تحتاج في معظم الحالات إلى ضبط الإعدادات يدويًا في Next.js لأنها تهيئ تلقائيًا webpack. لكن عندما تحتاج إلى تحكم أكبر في حالات متقدمة، عد إلى [[Next.js/next.config.js|توثيق الإعدادات المخصصة]].


== ما الذي ألهم Next.js? ==
== ما الذي ألهم Next.js? ==
إن الكثير من الأهداف التي عزمنا على إنجازها كانت تلك الموجودة في قائمة [https://rauchg.com/2014/7-principles-of-rich-web-applications المبادئ السبعة لتطبيقات الويب الغنية] التي أعدها Guillermo Rauch.
إن الكثير من الأهداف التي عزمنا على إنجازها كانت تلك الموجودة في قائمة [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.

المصادر