الفرق بين المراجعتين ل"Next.js/faq"
< Next.js
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة) |
|||
| سطر 8: | سطر 8: | ||
تزوّدك Next.js بطرق عديدة وفقًا لمتطلباتك. إذ يمكنك استخدام: | تزوّدك Next.js بطرق عديدة وفقًا لمتطلباتك. إذ يمكنك استخدام: | ||
| − | * التصيير من جانب العميل: وإحضار البيانات باستخدام <code>useEffect</code> و SWR ضمن مكونات React. | + | * التصيير من جانب العميل: وإحضار البيانات باستخدام <code>useEffect</code> و SWR ضمن مكونات [[React]]. |
* التصيير من جانب الخادم: من خلال الدالة <code>getServersSideProps</code>. | * التصيير من جانب الخادم: من خلال الدالة <code>getServersSideProps</code>. | ||
* التوليد الساكن للموقع: من خلال الدالة <code>getStaticProps</code>. | * التوليد الساكن للموقع: من خلال الدالة <code>getStaticProps</code>. | ||
| سطر 15: | سطر 15: | ||
راجع توثيق [[Next.js/data fetching|إحضار البيانات]] لمزيد من المعلومات. | راجع توثيق [[Next.js/data fetching|إحضار البيانات]] لمزيد من المعلومات. | ||
| − | == لماذا تمتلك Next.js موجّهًا خاصًا بها؟ == | + | == لماذا تمتلك Next.js موجّهًا Router خاصًا بها؟ == |
تقدم Next.js موجّهًا مدمجًا للأسباب التالية: | تقدم Next.js موجّهًا مدمجًا للأسباب التالية: | ||
* اعتمادها على موجِّه يعتمد فكرة نظام الملفات مما يقلل الإعدادات اللازمة. | * اعتمادها على موجِّه يعتمد فكرة نظام الملفات مما يقلل الإعدادات اللازمة. | ||
* لدعم التوجه السطحي shallow routing الذي يسمح بتغيير عنوان URL دون تنفيذ أية توابع إضافية لإحضار البيانات. | * لدعم التوجه السطحي shallow routing الذي يسمح بتغيير عنوان URL دون تنفيذ أية توابع إضافية لإحضار البيانات. | ||
| − | * لأن الوجهات تُحمّل دائمًا بالأسلوب الكسول أو | + | * لأن الوجهات تُحمّل دائمًا بالأسلوب الكسول أو المُرجَأ lazy. |
| − | اطلع على [[Next.js/migrating| | + | اطلع على توثيق [[Next.js/migrating|الانتقال من React Router إلى Next.js]] إن كنت بصدد الانتقال. |
== هل يمكن استخدام Next.js مع مكتبة JavaScript التي أفضلها؟ == | == هل يمكن استخدام Next.js مع مكتبة JavaScript التي أفضلها؟ == | ||
| سطر 30: | سطر 30: | ||
نعم! اطلع على الأمثلة المخصصة مع [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 مع | + | == هل يمكنني استخدام Next.js مع Redux؟ == |
نعم! إليك [https://github.com/vercel/next.js/tree/canary/examples/with-redux مثالًا] باستخدام Redux و[https://github.com/vercel/next.js/tree/canary/examples/with-redux-thunk مثالًا] باستخدام thunk. | نعم! إليك [https://github.com/vercel/next.js/tree/canary/examples/with-redux مثالًا] باستخدام Redux و[https://github.com/vercel/next.js/tree/canary/examples/with-redux-thunk مثالًا] باستخدام thunk. | ||
| سطر 37: | سطر 37: | ||
== هل يمكن استخدام شبكة إيصال المحتوى CDN لتخديم الموجودات الساكنة؟ == | == هل يمكن استخدام شبكة إيصال المحتوى CDN لتخديم الموجودات الساكنة؟ == | ||
| − | نعم! عندما تنشر مشروع Next.js على Vercel ستتعرف شبكة Edge تلقائيًا على الموجودات الساكنة. أما إن استضفت التطبيق بنفسك، فعليك أن تطلع على طريقة [[Next.js/next.config.js|الإعداد اليدوي لبادئات التسمية لملفات الموجودات الساكنة]]. | + | نعم! عندما تنشر مشروع Next.js على Vercel ستتعرف شبكة Edge تلقائيًا على الموجودات الساكنة static assets. أما إن استضفت التطبيق بنفسك، فعليك أن تطلع على طريقة [[Next.js/next.config.js|الإعداد اليدوي لبادئات التسمية لملفات الموجودات الساكنة]]. |
== كيف أستطيع تغيير الإعداد الداخلي للمحزِّم webpack؟ == | == كيف أستطيع تغيير الإعداد الداخلي للمحزِّم webpack؟ == | ||
لن تحتاج في معظم الحالات إلى ضبط الإعدادات يدويًا في Next.js لأنها تهيئ تلقائيًا webpack. لكن عندما تحتاج إلى تحكم أكبر في حالات متقدمة، عد إلى [[Next.js/next.config.js|توثيق الإعدادات المخصصة]]. | لن تحتاج في معظم الحالات إلى ضبط الإعدادات يدويًا في Next.js لأنها تهيئ تلقائيًا webpack. لكن عندما تحتاج إلى تحكم أكبر في حالات متقدمة، عد إلى [[Next.js/next.config.js|توثيق الإعدادات المخصصة]]. | ||
| − | == ما الذي ألهم Next. | + | == ما الذي ألهم Next.js؟ == |
| − | إن الكثير من الأهداف التي عزمنا على إنجازها كانت تلك الموجودة في قائمة [https://rauchg.com/2014/7-principles-of-rich-web-applications المبادئ السبعة لتطبيقات الويب الغنية] التي أعدها Guillermo Rauch. كما أن سهولة استخدام PHP كان ولا يزال ملهمًا عظيمًا. إذ نعتقد أن Next.js هو بديل مناسب في الكثير من الحالات التي تُضطر فيها إلى استخدام PHP لإنتاج خرج HTML. استفدنا على خلاف PHP من مزايا نظام وحدات ES6 وكيف تُصدّر كل صفحة مكوّنًا أو دالة يمكن إدراجها للتحقق الكسول أو الاختبارات. | + | إن الكثير من الأهداف التي عزمنا على إنجازها كانت تلك الموجودة في قائمة [https://rauchg.com/2014/7-principles-of-rich-web-applications المبادئ السبعة لتطبيقات الويب الغنية] التي أعدها Guillermo Rauch. كما أن سهولة استخدام [[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. | ||
| سطر 50: | سطر 50: | ||
* الصفحة [https://nextjs.org/docs/faq Frequently Asked questions] من توثيق Next.js الرسمي. | * الصفحة [https://nextjs.org/docs/faq Frequently Asked questions] من توثيق Next.js الرسمي. | ||
| + | [[تصنيف:Next.js]] | ||
مراجعة 14:57، 1 يناير 2023
إليك بعض الأجوبة عن أكثر الأسئلة شيوعًا حول Next.js.
هل تطبيقات Next.js جاهزة للإنتاج والنشر؟
نعم! وتُستخدم في العديد من مواقع الويب ذائعة الصيت في العالم. ألق نظرة على بعضها.
كيف سأحضِر البيانات في Next.js؟
تزوّدك Next.js بطرق عديدة وفقًا لمتطلباتك. إذ يمكنك استخدام:
- التصيير من جانب العميل: وإحضار البيانات باستخدام
useEffectو SWR ضمن مكونات React. - التصيير من جانب الخادم: من خلال الدالة
getServersSideProps. - التوليد الساكن للموقع: من خلال الدالة
getStaticProps. - التجديد التلقائي الساكن: بإضافة الخاصية
revalidateإلىgetStaticProps.
راجع توثيق إحضار البيانات لمزيد من المعلومات.
لماذا تمتلك Next.js موجّهًا Router خاصًا بها؟
تقدم 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 تلقائيًا على الموجودات الساكنة static assets. أما إن استضفت التطبيق بنفسك، فعليك أن تطلع على طريقة الإعداد اليدوي لبادئات التسمية لملفات الموجودات الساكنة.
كيف أستطيع تغيير الإعداد الداخلي للمحزِّم 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 الرسمي.