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

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
طلا ملخص تعديل
 
(51 مراجعة متوسطة بواسطة 4 مستخدمين غير معروضة)
سطر 1: سطر 1:
== البدء مع Next.js ==
يُعد Next.js إطار عمل مفتوح المصدر مبني على مكتبة React يوفر حلولًا لبناء المواقع وتطبيقات الويب بناءً على مكتبة React بسرعة وكفاءة أهمها التصيير من طرف الخادم server-side rendering والتوليد الساكن generating static وهو أحد الحلول المفضلة الذي تنصح به مكتبة [[React]] في توثيقها عندما تدعو الحاجة إلى بناء تطبيقات ويب تُصيَّر من طرف الخادم. <blockquote>هذا التوثيق مُحدَّث لإصدار 13.1.1. </blockquote>{{Course|course=javascript}}
مرحبًا بك إلى توثيقات Next.js باللغة العربية!
__TOC__
== نبذة عن إطار العمل Next.js ==
إن أردت بناء تطبيق ويب باستخدام مكتبة [[React]] فقط، فهنالك عدة نقاط يجب أن تراعيها وتأخذها بالحسبان وهي:


'''متطلبات النظام:'''
* يجب أن تُجمَّع الشيفرة عبر مُجمِّع bundler مثل webpack وأن تُحوَّل باستعمال مُصرِّف مثل Babel.
* عليك أن تجري تحسينات على نسخة الإنتاج مثل فصل الشيفرة وتقسيمها إلى أجزاء.
* قد تحتاج إلى تجهيز بعض الصفحات مسبقًا قبل إرسلها إلى المستخدم أو العميل لعدة أغراض أهمها تحسين الأداء وتحسين الظهور في محركات البحث SEO، وقد تضطر إلى استخدام عميلة التصيير من طرف الخادم server-side rendering أو التصيير من طرف العميل client-side rendering.
* قد تحتاج إلى كتابة شيفرة تعمل من طرف الخادم لتربط تطبيق React مع مصدر بيانات.


* حزمة Node.js نسختها [https://nodejs.org/en/ 12.22.0] أو أعلى
أولًا وآخرًا تُعد React '''مكتبة library''' قائمة على لغة [[JavaScript]] وتفتقر إلى أجزاء أخرى لتُكمِّل عملها وهنا تظهر الحاجة إلى استخدام '''إطار عمل framework''' يوفر حلولًا متكاملة للنقاط السابقة وغيرها ويُفضل أن يتصف إطار العمل بمستوًى جيد من المرونة والتجريد وإلا لن يخدم احتياجك عكس المكتبة آنذاك التي من أهم ميزتها أنها توفر لك خيارات متعددة من التخصيص والتجريد لحاجتك.  
* نظام تشغيل ماك أو ويندوز (بما في ذلك منظومة ويندوز الفرعية لدعم لينكس WSL) أو لينكس.


=== التثبيت التلقائي لإطار عمل Next.js ===
يمكنك أن تتخيل أن المكتبة مثل قطعة مُكعَّبات أو ليجو lego يمكنك تركيبها مع بقية القطع التي تختارها بما يناسب احتياجك وما تريد بناءه، أما إطار العمل فهو يشبه صندوق فيه أجزاء جاهزة جاهزة للعمل كل ما عليك تخصيصها ووصلها مع بعضها لتعمل بما يناسب احتياجك وهنا تختلف أُطر العمل بمقدار هذا التخصيص ومرونة التعديل وضبط الخيارات فيها.
من الأفضل أن تُنشئ تطبيقًا جديدًا باستخدام <code>create-next-app</code> وستثبت هذه العملية كل ما تحتاجه تلقائيًا. لإنشاء تطبيق جديد في Next.js، اكتب التعليمات التالية في طرفية Node.js:<syntaxhighlight line="1" start="1">
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
</syntaxhighlight>بإمكانك استخدام الراية <code>typescript--</code> إن أردت ان تبدأ بمشروع TypeScript:<syntaxhighlight line="1" start="1">
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --typescript
</syntaxhighlight>عند اكتمال التثبيت:


* شغل خادم التطوير على العنوان  <code><nowiki>http://localhost:3000</nowiki></code> مستخدمًا إحدى التعليمات التالية:
جاء إطار العمل Next.js وهو إطار عمل مبني على مكتبة React ليوفر حلولًا لجميع النقاط السابقة التي تواجه أي مُطور أثناء عملية بناء تطبيق ويب والأهم من ذلك أنه يأخذ بيد المُطور وفريق التطوير كله إلى النجاح بل وحتى السرعة والكفاءة في عملية بناء تطبيقات React.
** <code>npm run dev</code>
** <code>yarn dev</code>
** <code>pnpm dev</code>


* زر العنوان السابق للاطلاع على تطبيقك.
أُطلق إطار العمل Next.js في أواخر عام 2016 بواسطة شركة Vercel وآخر إصدار مُستقر له حاليًا 13.0.2 وهو مشروع مفتوح المصدر مكتوب بلغة [[JavaScript]] و [[TypeScript]] ولغة Rust ويشرف عليه مُطورون من شركة Vercel ومجتمع المصادر المفتوحة وتملك تلك الشركة اليوم حقوقه وعلامته التجارية وتديره حاليًا وتقود عملية تطويره في أوساط المجتمع وتمثِّل الداعم الأكبر والمساهم الرئيسي؛ وقد شاع استخدامه كثيرًا فقد تجاوز عدد مرات استخدامه اليوم عشرات الآلاف بين مواقع وتطبيقات ويب.
* عدّل الصفحة  <code>pages/index.js</code> وراقب نتيجة ما فعلته في المتصفح.


لمزيد من المعلومات حول <code>create-next-app</code>، حاول الإطلاع على التوثيقات الخاصة به.
يهدف إطار العمل Next.js إلى توفير تجربة تطوير مميزة ويقدم الكثير من الميزات الضمنية مثل:


=== التثبيت اليدوي ===
* نظام توجيه قائم على الملفات مع دعم الوجهات الديناميكية dynamic routes.
ثبت <code>next</code> و <code>react</code> و <code>react-dom</code> في مشروعك كالتالي:<syntaxhighlight lang="bash">
* إجراء عملية تصيير مُسبق pre-rendering بدعم عملية التوليد الساكن SSG والتصيير من جانب الخادم SSR على كل صفحة.
* فصل الشيفرة وتقسييمها لتحميل الصفحة بسرعة.
* دعم التوجيه من طرف الخادم مع إجراء عملية جلب مُسبقة.
* دعم تنسيقات [[CSS]] وامتدادها [[Sass]] بالإضافة إلى دعم أي آلية كتابة تنسيقات CSS في شيفرة JavaScript واختصارًا CSS-in-JS.
* توفير بيئة تطوير متكاملة مع دعم التحديث السريع.
* دعم إضافة واجهة برمجية خلفية API endpoints مع دوال دون خادم Serverless Functions.
* قابلية كبيرة للتوسيع والضبط والتخصيص.


npm install next react react-dom
{{:Next.js/Topics}}
# or
[[تصنيف:Next.js|{{SUBPAGENAME}}]]
yarn add next react react-dom
# or
pnpm add next react react-dom
</syntaxhighlight>افتح الملف <code>package.json</code> ثم أضف الشيفرة التالية:<syntaxhighlight lang="json">
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}
</syntaxhighlight>تشير هذه الشيفرة إلى المراحل المختلفة لتطوير التطبيق:
 
* <code>dev</code> : ينفذ الأمر <code>next dev</code> للعمل مع Next.js في نمط التطوير.
* <code>build</code>: ينفذ الأمر <code>next build</code> لبناء تطبيق يعمل في نمط الإنتاج.
* <code>start</code>: ينفذ الأمر <code>next start</code> لتشغيل خادم إنتاج Next.js.
* <code>lint</code>: ينفذ الأمر <code>next lint</code> لتهيئة مدقق ESLint المدمج مع Next.js.
 
أنشئ بعد ذلك مجلدين الأول يحمل الاسم <code>pages</code> والآخر <code>public</code> ضمن الملف الجذري لتطبيقك:
 
* <code>pages</code>: ويمثل جذرًا لعناوبن الملفات التي يضمها، إذ يقترن المسار <code>pages/about.js</code>  مثلًا بالمسار <code>about/</code>.
* <code>public</code>: يخزّن موارد الدعم كالصور وخطوط الكتابة وغيرها. يمكن الإشارة إلى الملفات الموجودة ضمن هذا المجلد انطلاقًا من العنوان الجذري <code>/</code> تمامًا كالملفات الموجودة ضمن <code>pages</code>.
بُنيت  Next.js على مفهوم [[Next.js/Pages|الصفحات]]، والصفحة هي [[React/components and props|مكوّن رياكت]] React Component يُصدَّر من ملفات موجودة في المجلد <code>pages</code> تحمل إحدى الامتدادات التالية  <code>js.</code> أو <code>jsx.</code> أو <code>ts.</code> أو <code>tsx.</code>. بإمكانك أيضًا إضافة معاملات المسارات الديناميكية مع اسم الملف.
 
ضع الملف <code>index.js</code> في المجلد <code>pages</code> حتى تبدأ العمل، فهي الصفحة التي يعرضها المتصفح عند زيارة المجلد الجذري لتطبيقك. وطّن الصفحة <code>pages/index.js</code> (اجعلها الصفحة الرئيسية) بإضافة المحتوى التالي لها:<syntaxhighlight lang="javascript">
function HomePage() {
  return <div>Welcome to Next.js!</div>
}
 
export default HomePage
</syntaxhighlight>بعد اكتمال التثبيت:
 
* نفّذ أحد الأوامر التالية لتشغّل خادم التطوير على العنوان <code><nowiki>http://localhost:3000</nowiki></code> :
** <code>npm run dev</code>
** <code>yarn dev</code>
** <code>pnpm dev</code>
* زر العنوان <code><nowiki>http://localhost:3000</nowiki></code> لاستعراض تطبيقك
* عدّل في الصفحة <code>pages/index.js</code> لترى النتيجة مباشرة على متصفحك.
 
'''<u>ما فعلناه حتى اللحظة:</u>'''
 
* تصريف compiling و [[Next.js/compiler|تجميع]] bundling تلقائي.
* تهيئة التحديث السريع لرياكت React Fast Refresh.
* تقديم الملفات الثابتة Static file serving من خلال المسار <code>public/</code> المرتبط بالعنوان الجذري (<code>/</code>).
 
سيكون كل تطبيق جاهزًا لمرحلة الإنتاج ابتداءً من لحظة إنشائه، وهذا ما سنراه في توثيقات توزيع التطبيقات.
 
== الميزات الأساسية ==
 
=== [[Next.js/pages|صفحات Next.js]] ===
=== [[Next.js/data_fetching|إحضار البيانات في Next.js]] ===
 
=== [[Next.js/built_in_css_support|دعم تنسيقات CSS المدمجة في Next.js]] ===
 
=== [[Next.js/layouts|تخطيطات الصفحة في Next.js]] ===
 
=== [[Next.js/image optimization|تحسين الصور في Next.js]] ===
 
=== [[Next.js/font_optimization|تحسين خطوط الكتابة في Next.js]] ===
 
=== [[Next.js/static_file_serving|تخديم الملفات الساكنة في Next.js]] ===
 
=== [[Next.js/fast_refresh|التحديث السريع في Next.js]] ===
 
=== [[Next.js/eslint|استخدام مدقق الشيفرة ESLint في Next.js]] ===
 
=== [[Next.js/typescript|استخدام TypeScript في Next.js]] ===
 
=== [[Next.js/environment_variables|متغيرات البيئة في Next.js]] ===
 
=== [[Next.js/supported_browsers_features|المتصفحات والميزات المدعومة في Next.js]] ===
 
=== [[Next.js/script|التعامل مع السكربتات في Next.js]] ===
 
== [[Next.js/Routing|توجيه المسارات في Next.js]] ==
 
== [[Next.js/api_routes|المسارات إلى الواجهة البرمجية API في Next.js]] ==
 
== [[Next.js/going_to_production|ما قبل مرحلة الإنتاج في Next.js]] ==
 
== [[Next.js/deployment|نشر تطبيقات Next.js]] ==
 
== [[Next.js/authentication|الاستيثاق في Next.js]] ==
 
== [[Next.js/testing|اختبار تطبيقات Next.js]] ==
 
== [[Next.js/guides|دليل بناء النماذج باستخدام Next.js]] ==
 
== ميزات متقدمة ==
 
=== [[Next.js/compiler|مُصرِّف Next.js]] ===
 
=== [[Next.js/preview_mode|نمط استعراض الصفحات في Next.js]] ===
 
=== [[Next.js/dynamic_import|الإدراج الديناميكي في Next.js]] ===
 
=== [[Next.js/automatic_static_optimization|التحسين الساكن التلقائي في Next.js]] ===
 
=== [[Next.js/static_html_export|تصدير التطبيق إلى صفحات HTML ساكنة في Next.js]] ===
 
=== [[Next.js/module_path_aliases|المسارات المطلقة البديلة للمُدرجات و الوحدات البرمجية في Next.js]] ===
 
=== [[Next.js/using_mdx|استخدام MDX مع Next.js]] ===
 
=== [[Next.js/amp_support|دعم صفحات AMP في Next.js]] ===
 
=== [[Next.js/customizing_babel_config|التهيئة المخصصة للمحلل Babel]] ===
 
=== [[Next.js/customizing_postcss_config|إعدادات مخصصة للمصرّف PostCSS في Next.js]] ===
 
=== [[Next.js/custom_server|استخدام خادم مخصص في Next.js]] ===
 
=== [[Next.js/custom_app|التطبيقات المخصصة باستخدام المكوّن <code>App</code>]] ===
 
=== [[Next.js/custom_document|Custom `Document`]] ===
 
=== [[Next.js/custom_error_page|Custom Error Page]] ===
 
=== [[Next.js/src_directory|`src` Directory]] ===
 
=== [[Next.js/multi_zones|Multi Zones]] ===
 
=== [[Next.js/measuring_performance|Measuring performance]] ===
 
=== [[Next.js/middleware|Middleware (Beta)]] ===
 
=== [[Next.js/debugging|Debugging]] ===
 
=== [[Next.js/error_handling|Error Handling]] ===
 
=== [[Next.js/source_maps|Source Maps]] ===
 
=== [[Next.js/codemods|Codemods]] ===
 
=== [[Next.js/i18n_routing|Internationalized Routing]] ===
 
=== [[Next.js/output_file_tracing|Output File Tracing]] ===
 
=== [[Next.js/security_headers|Security Headers]] ===
 
=== [[Next.js/react_18|React 18]] ===
 
== [[Next.js/upgrading|Upgrade Guide]] ==
 
== [[Next.js/migrating|Migrating to Next.js]] ==
 
== [[Next.js/faq|FAQ]] ==
 
== مرجع الواجعة البرمجية API Reference ==
 
=== [[Next.js/cli|CLI]] ===
 
=== [[Next.js/create_next_app|Create Next App]] ===
 
=== [[Next.js/next_router|next/router]] ===
 
=== [[Next.js/next_link|next/link]] ===
 
=== [[Next.js/next_image|next/image]] ===
 
=== [[Next.js/next_script|next/script]] ===
 
=== [[Next.js/next_head|next/head]] ===
 
=== [[Next.js/next_amp|next/amp]] ===
 
=== [[Next.js/next_server|next/server]] ===
 
=== [[Next.js/next_streaming|next/streaming]] ===
 
=== [[Next.js/edge_runtime|Edge Runtime]] ===
 
=== [[Next.js/api data fetching|Data Fetching]] ===
 
=== [[Next.js/static_optimization_indicator|Static Optimization Indicator]] ===
 
=== [[Next.js/next.config.js|next.config.js]] ===

المراجعة الحالية بتاريخ 14:52، 1 أغسطس 2024

يُعد Next.js إطار عمل مفتوح المصدر مبني على مكتبة React يوفر حلولًا لبناء المواقع وتطبيقات الويب بناءً على مكتبة React بسرعة وكفاءة أهمها التصيير من طرف الخادم server-side rendering والتوليد الساكن generating static وهو أحد الحلول المفضلة الذي تنصح به مكتبة React في توثيقها عندما تدعو الحاجة إلى بناء تطبيقات ويب تُصيَّر من طرف الخادم.

هذا التوثيق مُحدَّث لإصدار 13.1.1.

دورة تطوير التطبيقات باستخدام لغة JavaScript
  • 71 ساعة فيديو تدريبية
  • من الصفر دون الحاجة لخبرة مسبقة
  • شهادة معتمدة من أكاديمية حسوب
  • متابعة أثناء الدورة من فريق مختص

نبذة عن إطار العمل Next.js

إن أردت بناء تطبيق ويب باستخدام مكتبة React فقط، فهنالك عدة نقاط يجب أن تراعيها وتأخذها بالحسبان وهي:

  • يجب أن تُجمَّع الشيفرة عبر مُجمِّع bundler مثل webpack وأن تُحوَّل باستعمال مُصرِّف مثل Babel.
  • عليك أن تجري تحسينات على نسخة الإنتاج مثل فصل الشيفرة وتقسيمها إلى أجزاء.
  • قد تحتاج إلى تجهيز بعض الصفحات مسبقًا قبل إرسلها إلى المستخدم أو العميل لعدة أغراض أهمها تحسين الأداء وتحسين الظهور في محركات البحث SEO، وقد تضطر إلى استخدام عميلة التصيير من طرف الخادم server-side rendering أو التصيير من طرف العميل client-side rendering.
  • قد تحتاج إلى كتابة شيفرة تعمل من طرف الخادم لتربط تطبيق React مع مصدر بيانات.

أولًا وآخرًا تُعد React مكتبة library قائمة على لغة JavaScript وتفتقر إلى أجزاء أخرى لتُكمِّل عملها وهنا تظهر الحاجة إلى استخدام إطار عمل framework يوفر حلولًا متكاملة للنقاط السابقة وغيرها ويُفضل أن يتصف إطار العمل بمستوًى جيد من المرونة والتجريد وإلا لن يخدم احتياجك عكس المكتبة آنذاك التي من أهم ميزتها أنها توفر لك خيارات متعددة من التخصيص والتجريد لحاجتك.

يمكنك أن تتخيل أن المكتبة مثل قطعة مُكعَّبات أو ليجو lego يمكنك تركيبها مع بقية القطع التي تختارها بما يناسب احتياجك وما تريد بناءه، أما إطار العمل فهو يشبه صندوق فيه أجزاء جاهزة جاهزة للعمل كل ما عليك تخصيصها ووصلها مع بعضها لتعمل بما يناسب احتياجك وهنا تختلف أُطر العمل بمقدار هذا التخصيص ومرونة التعديل وضبط الخيارات فيها.

جاء إطار العمل Next.js وهو إطار عمل مبني على مكتبة React ليوفر حلولًا لجميع النقاط السابقة التي تواجه أي مُطور أثناء عملية بناء تطبيق ويب والأهم من ذلك أنه يأخذ بيد المُطور وفريق التطوير كله إلى النجاح بل وحتى السرعة والكفاءة في عملية بناء تطبيقات React.

أُطلق إطار العمل Next.js في أواخر عام 2016 بواسطة شركة Vercel وآخر إصدار مُستقر له حاليًا 13.0.2 وهو مشروع مفتوح المصدر مكتوب بلغة JavaScript و TypeScript ولغة Rust ويشرف عليه مُطورون من شركة Vercel ومجتمع المصادر المفتوحة وتملك تلك الشركة اليوم حقوقه وعلامته التجارية وتديره حاليًا وتقود عملية تطويره في أوساط المجتمع وتمثِّل الداعم الأكبر والمساهم الرئيسي؛ وقد شاع استخدامه كثيرًا فقد تجاوز عدد مرات استخدامه اليوم عشرات الآلاف بين مواقع وتطبيقات ويب.

يهدف إطار العمل Next.js إلى توفير تجربة تطوير مميزة ويقدم الكثير من الميزات الضمنية مثل:

  • نظام توجيه قائم على الملفات مع دعم الوجهات الديناميكية dynamic routes.
  • إجراء عملية تصيير مُسبق pre-rendering بدعم عملية التوليد الساكن SSG والتصيير من جانب الخادم SSR على كل صفحة.
  • فصل الشيفرة وتقسييمها لتحميل الصفحة بسرعة.
  • دعم التوجيه من طرف الخادم مع إجراء عملية جلب مُسبقة.
  • دعم تنسيقات CSS وامتدادها Sass بالإضافة إلى دعم أي آلية كتابة تنسيقات CSS في شيفرة JavaScript واختصارًا CSS-in-JS.
  • توفير بيئة تطوير متكاملة مع دعم التحديث السريع.
  • دعم إضافة واجهة برمجية خلفية API endpoints مع دوال دون خادم Serverless Functions.
  • قابلية كبيرة للتوسيع والضبط والتخصيص.

بدء استخدام Next.js

يشرح هذا القسم متطلبات إطار العمل Next.js اللازمة وكيفية تثبيته وبدء استخدامه.

الميزات الأساسية

الصفحات Pages

يشرح القسم الصفحة page وهي مكوّن React موجودة في المجلد pages وتقترن كل صفحة بأحد مسارات التطبيق.

إحضار البيانات

تتيح عملية إحضار البيانات في Next.js تصيير المحتوى بطرق عدة وفقًا للحالة التي تستخدم فيها التطبيق، بما في ذلك التصيير المسبق من جانب الخادم Server-Side Rendering أو التوليد الساكن للشيفرة Static Generation أو تحديث المحتوى أو إنشائه أثناء تشغيل التطبيق من خلال التوليد الساكن التدريجي Incremental Static Regeneration وهذا ما يشرحه هذا القسم.

دعم تنسيقات CSS المدمجة

يشرح القسم كيف تتيح Next.js إدراج ملفات تنسيق CSS من خلال ملف JavaScript، وهذا ممكن لأن Next.js توسِّع مفهوم الإدراج import أكثر مما هو عليه في JavaScript.

تخطيطات الصفحة Layouts

يشرح القسم كيف يمكن الاستفادة من مكونات واستخدامها في عدة صفحات تمثِّل شكل الصفحة وتخطيطها، فقد يكون للصفحات مثلًا شريط التنقل نفسه والتذييل نفسه ولا يُكرر تعريفه آنذاك.

تحسين الصور

يُعدّ مكون الصورة في Next.js امتدادًا لعنصر الصورة <img> في HTML وقد طُوِّر ليماشي تقنيات ويب الحديثة وهو ما يشرحه هذا القسم.

تحسين خطوط الكتابة

يشرح القسم الآلية المدمجة التي تمتلكها Next.js وتطبقها لتحسين خطوط الكتابة في التطبيق.

تخديم الملفات الساكنة

يشرح القسم كيف تُخدِّم Next.js الملفات الساكنة static files وهي الملفات الثابتة التي لا تتغير مثل الصور التي توجد في المجلد public ضمن المجلد الجذري.

التحديث السريع

يشرح القسم ميزة التحديث السريع Fast Refresh في Next.js التي تعطيك فكرة مباشرة عن التغييرات التي جرت على مكوّنات React.

استخدام مدقق الشيفرة ESLint

يشرح القسم كيفية استخدام مدقق القواعد ESLint، الذي توفر Next.js له دعمًا داخليًا.

استخدام TypeScript

يشرح القسم كيفية استخدام لغة TypeScript بما في ذلك التهيئة والأنواع في تطبيقات Next.js.

متغيرات البيئة

يشرح القسم متغيرات البيئة Environment Variables واستخدامها في تطبيقات Next.js عبر الدعم الذي توفره.

المتصفحات والميزات المدعومة

يعرض القسم الدعم الذي توفره Next.js لمختلف المتصفحات بمختلف إصداراتها وكيفية استهدات إصدارات أو ميزات محددة من المتصفحات وكيفية إضافة شيفرات موائمة polyfills لها.

التعامل مع السكربتات

يشرح القسم كيفية استخدام العنصر <script> تطبيق Next.js الذي يتيح تحديد أولوية تحميل السكربتات التي مصدرها طرف آخر خارجي في التطبيق وتحسين الأداء.

التوجيه Routing

توجيه المسارات

يشرح القسم موجه المسارات router الذي توفره Next.js والذي يعتمد على نظام ملفات مبني على مفهوم الصفحات.

مسارات الواجهة البرمجية API Routes

يعرض القسم طريقة بناء الواجهة البرمجية الخلفية API لتطبيقك باستخدام Next.js الذي يعمل في هذه الحالة كواجهة أمامية frontend وواجهة خلفية backend في الوقت نفسه.

ما قبل مرحلة الإنتاج

يعرض بعض النصائح المهمة لتضمن أفضل تجربة مستخدم عندما تصل بتطبيق Next.js إلى مرحلة الإنتاج.

نشر تطبيقات Next.js

يشرح هذا القسم كيفية نشر تطبيقات Next.js سواء المُدارة managed أو ذاتية الإدارة Self-hosted باستخدام الواجهة البرمجية لبناء التطبيقات.

الاستيثاق Authentication

تقدم لك Next.js أنماطًا متعددة من الاستيثاق وصُمم كل نمط لحالة مختلفة. سنمر في هذا القسم على كل حالة لتتمكن من الاختيار بناء على المعطيات المتوفرة لديك.

اختبار تطبيقات Next.js

نلقي نظرة في هذا القسم على طرق اختبار تطبيقات Next.js باستخدادم أدوات مثل Cypress و Playwright و Jest مع مكتبة اختبار React.

شمولية الوصول Accessibility في Next.js

يقدم لك حلول Next.js في دعم شمولية الوصول accessibility سواء للمطورين أو مستخدمي المنتجات النهائية التي تعتمد على Next.js.

دليل بناء النماذج

يساعدك هذا الدليل في تعلّم كيفية إنشاء نموذج ويب web form باستخدام Next.js.

ميزات متقدمة

مُصرِّف Next.js

يشرح هذا القسم مُصرِّف Next.js المُستخدم الذي كتب بلغة Rust باستخدام SWC بتحويل وتصغير شيفرة JavaScript لتصبح مناسبة لمرحلة الإنتاج، وبالتالي حل مكان Babel بالنسبة للملفات المستقلة و Terser لتصغير الحزم الناتجة.

نمط استعراض الصفحات

يعرض القسم ميزة توفرها Next.js تُدعى نمط الاستعراض Preview Mode وطريقة استخدامها في حل بعض المشكلات خصوصًا المتعلقة باستخدام Next.js في إحضار بيانات من منظومة إدارة محتوى دون واجهة headless CMS.

الإدراج الديناميكي

يشرح هذا القسم الدعم الذي توفره Next.js لعملية الإدراج الكسول أو المتأني lazy loading للمكتبات الخارجية عبر import()‎ وللمكونات React عبر next/dynamic.

التحسين الساكن التلقائي

يشرح القسم ميزة التحسين الساكن التلقائي التي توفرها Next.js لنشر تطبيقات هجينة تتضمن صفحات تُصيَّر من ناحية الخادم وأخرى توّلد بشكل ساكن.

تصدير التطبيق إلى صفحات HTML ساكنة

يشرح القسم كيفية تصدير تطبيق Next.js إلى صفحات HTML ساكنة قائمة بحد ذاتها دون الحاجة إلى خادم Node.js.

المسارات المطلقة البديلة للمُدرجات و الوحدات البرمجية

دعمت Next.js تلقائيًا الخيارين "paths" و "baseUrl" في ملفي التهيئة tsconfig.json و jsconfig.json اللذين يتيحين تهيئة مسارات بديلة aliases للوحدات البرمجية، ولهذين الخيارين ميزة مفيدة هي تكاملها التلقائي مع بعض محررات الشيفرة مثل vscode وهذا ما يشرحه هذا القسم.

استخدام MDX مع Next.js

تدعم Next.js صيغة MDX -وهي صيغة موّسعة تُشتق منها تنسيقات ماركداون markdown- بطرق مختلفة، وسيرشدك هذا القسم إلى بعض طرق تكامل MDX مع تطبيقات Next.js.

دعم صفحات AMP

يشرح القسم الدعم الذي توفره Next.js لتحويل صفحات React إلى صفحات AMP بأقل قدر من الإعدادات ودون أن تتخلى عن React.

تخصيص ضبط Babel

يشرح القسم كيفية توسيع إعدادات Babel الافتراضية التي تضيفها Next.js إلى التطبيق.

إعدادات مخصصة للمصرّف PostCSS

تقدم Next.js دعمًا مدمجًا لتنسيقات CSS، ويشرح هذا القسم كيفية تهيئة المصرِّف الخاص بهذه التنسيقات وتخصيصه.

استخدام خادم مخصص

تستخدم Next.js خادمها الافتراضي عند تنفيذ الأمر next start، لكن إن كانت لديك واجهة خلفية جاهزة ستتمكن من استخدامها في Next.js والاعتماد على خادم مخصص وهذا ما يشرحه هذا القسم.

التطبيقات المخصصة باستخدام المكون App

يشرح القسم كيفية تخصيص المكوّن App لتهيئة الصفحات تهيئة مخصصة كما تريد.

المستندات المخصصة باستخدام المكون Document

يشرح القسم كيفية تخصيص المكوّن Document الافتراضي في التطبيق الذي يُستخدم في جانب الخادم فقط.

صفحات مخصصة لعرض الأخطاء

يعرض القسم مجموعة الصفحات التي يمكن تخصيصها لعرض أخطاء الاتصال بالخادم بالطريقة التي يريدها المطور.

المجلد src

يشرح القسم إمكانية إضافة الصفحات في المجلد src/pages كبديل عن المجلد الجذري pages.

دمج التطبيقات المفردة (الحيزات)

يُطلق اسم حيّز Zone على توزيعة مفردة من تطبيق Next.js، وبإمكانك دمج عدة حيّزات في تطبيق واحد وهذا ما يعرضه القسم.

قياس الأداء في تطبيقات Next.js

يشرح القسم كيفية تحليل أداء تطبيقات Next.js وقياس أداء الصفحات بناءً على مؤشرات مختلفة.

الأدوات الوسطية Middleware

يشرح القسم الأدوات أو البرمجيات الوسيطة التي تُمكنك من تنفيذ مهمة قبل اكتمال كل طلب request وتعديل الرد بناءً على الطلب الوارد من خلال إعادة كتابة أو إعادة التوجيه أو إضافة الترويسات أو حتى بالرد على الطلب مباشرة.

تنقيح تطبيقات Next.js

يشرح هذا القسم كيفية تنقيح شيفرة الواجهتين الأمامية والخلفية بدعم كامل لملفات الربط المصدرية source maps وذلك باستخدام منقح VS Code أو أدوات مطورري ويب المدمجة مع المتصفح Google Chrome.

معالجة الأخطاء

يشرح هذا القسم كيفية معالج الأخطاء في كلتا الواجهتين الأمامية والخلفية في مرحلة التطوير.

ملفات الربط المصدرية

يشرح القسم آلية ضبط ملفات الربط المصدرية Source Maps في مرحلة البناء للتطبيق.

تحويلات Codemods

تقدم Next.js تحويلات Codemod تساعد على ترقية ملفات شيفرة تطبيق Next.js لتعديل ميزة توقف دعمها ويعرض هذا القسم جميع تلك التحويلات المتوفرة.

الوجهات العالمية i18n routing

يشرح القسم الدعم المدمج الذي تقدمه Next.js للوجهات العالمية internationalized (i18n) routing وكيفية ضبطها.

تتبع ملفات الخرج

يشرح القسم ميزة تتبع ملفات الخرج في المجلد /next. التي توفرها Next.js.

ترويسات الأمان

يشرح القسم الترويسات headers المُستخدمة في ملف التهيئة next.config.js لتطبيق ترويسات استجابة HTTP على جميع الوجهات في التطبيق لتحسين مستوى الأمان فيه.

استخدام React 18

يسلط القسم الضوء على الميزات الحديثة التي قدمها الإصدار 18 من React ودعمها في تطبيقات Next.js.

دليل ترقية إصدارات Next.js

يعرض القسم قائمة بالتغييرات التي تحدث عند ترقية إصدارات Next.js والمتطلبات اللازمة لكل منها.

الانتقال إلى Next.js

يشرح القسم كيفية الانتقال تدريجيًا إلى Next.js وتبنيها دون الحاجة إلى إعادة كتابة كل شيء من الصفر.

الأسئلة الأكثر شيوعًا حول Next.js

يعرض القسم بعض الأجوبة عن أكثر الأسئلة شيوعًا حول Next.js.

مرجع الواجهة البرمجية API Reference

واجهة سطر الأوامر

تسمح لك واجهة سطر الأوامر CLI في تشغيل وبناء وتصدير نسخة إنتاج من تطبيق Next.js.

الأداة Create Next App

إن أسهل الطرق لتبدأ بناء تطبيقات Next.js هو استخدام الأداة create-next-app التي تمكنك هذه الأداة التي تستخدم واجهة سطر الأوامر CLI أن تبدأ بناء تطبيق Next.js جديد بسرعة بعد أن تهيئ لك كل شئ.

المكون next/router

يشرح القسم الخطاف useRouter والخطاف withRouter مع الكائن router الذي يمثِّل المُوجِّه.

المكون next/link

يشرح القسم مكون الرابط Link وخاصياته المستورد عبر next/link. المُستخدم في التنقل بين الصفحات أو الوجهات في جانب العميل.

المكون next/image

يشرح القسم مكون الصورة الجديد وخاصياته المستورد عبر next/image.

المكون next/legacy/image

يشرح القسم مكون الصورة القديم وخاصياته المستورد عبر next/legacy/image.

المكون next/script

يشرح القسم مكون السكربت script وخاصياته المستورد عبر next/script.

المكون next/head

يشرح القسم مكون الترويسة واستخدامه المستورد عبر next/head المستخدم في ربط العناصر إلى ترويسة الصفحة <head>.

المكون next/amp

يشرح القسم كيفية تمكين دعم صفحات AMP.

المكون next/server

يشرح القسم المكون next/server الذي يقدم مجموعة من دوال مساعدة تعمل على الخادم فقط وتُستخدم من قبل البرمجيات الوسيطة أو وجهات API المتقدمة.

المُشغل الآني المتقدم Edge Runtime

يعتمد المُشغل الآني المتقدم Edge Runtime في Next.js على واجهات الويب البرمجية Web API التي تُستخدم من قبل البرمجيات الوسيطة أو وجهات API المتقدمة.

الواجهة البرمجية لإحضار البيانات

يعرض القسم الواجهة البرمجية للدوال التي تستخدمها Next.js في إحضار البيانات وهي:

  • getInitialProps
  • getServerSideProps
  • getStaticPaths
  • getStaticProps

مؤشر التحسين الساكن

يعرض القسم كيفية ضبط مؤشر التحسين الساكن autoPrerender ضمن devIndicators.

العمل مع ملف التهيئة next.config.js

يشرح القسم كافة الإعدادات التي يمكن ضبطها في ملف التهيئة next.config.js لتطبيق إعدادت متقدمة على تطبيق Next.js.

مجلوبة من «https://wiki.hsoub.com/index.php?title=Next.js&oldid=33003»