الفرق بين المراجعتين ل"Next.js"
اذهب إلى التنقل
اذهب إلى البحث
التطبيقات المخصصة باستخدام المكون
المستندات المخصصة باستخدام المكون
المجلد
المكون
المكون
المكون
المكون
المكون
المكون
المكون
العمل مع ملف التهيئة
جميل-بيلوني (نقاش | مساهمات) ط |
جميل-بيلوني (نقاش | مساهمات) |
||
| سطر 30: | سطر 30: | ||
'''متطلبات النظام:''' | '''متطلبات النظام:''' | ||
| − | * حزمة Node.js نسختها [https://nodejs.org/en/ | + | * حزمة Node.js نسختها [https://nodejs.org/en/ 14.6.0] أو أعلى |
* نظام تشغيل ماك أو ويندوز (بما في ذلك منظومة ويندوز الفرعية لدعم لينكس WSL) أو لينكس. | * نظام تشغيل ماك أو ويندوز (بما في ذلك منظومة ويندوز الفرعية لدعم لينكس WSL) أو لينكس. | ||
=== التثبيت التلقائي لإطار عمل Next.js === | === التثبيت التلقائي لإطار عمل Next.js === | ||
| − | من الأفضل أن تُنشئ تطبيقًا جديدًا باستخدام <code>create-next-app</code> وستثبت هذه العملية كل ما تحتاجه تلقائيًا. لإنشاء تطبيق | + | من الأفضل أن تُنشئ تطبيقًا جديدًا باستخدام <code>create-next-app</code> وستثبت هذه العملية كل ما تحتاجه تلقائيًا. لإنشاء تطبيق جديد، اكتب التعليمات التالية في طرفية Node.js:<syntaxhighlight start="1" lang="bash"> |
npx create-next-app@latest | npx create-next-app@latest | ||
# or | # or | ||
| سطر 40: | سطر 40: | ||
# or | # or | ||
pnpm create next-app | pnpm create next-app | ||
| − | </syntaxhighlight>بإمكانك استخدام الراية <code>typescript--</code> إن أردت ان تبدأ بمشروع TypeScript:<syntaxhighlight | + | </syntaxhighlight>بإمكانك استخدام الراية <code>typescript--</code> إن أردت ان تبدأ بمشروع TypeScript:<syntaxhighlight start="1" lang="bash"> |
npx create-next-app@latest --typescript | npx create-next-app@latest --typescript | ||
# or | # or | ||
| سطر 101: | سطر 101: | ||
* عدّل في الصفحة <code>pages/index.js</code> لترى النتيجة مباشرة على متصفحك. | * عدّل في الصفحة <code>pages/index.js</code> لترى النتيجة مباشرة على متصفحك. | ||
| − | + | ما فعلناه حتى اللحظة: | |
* تصريف compiling و [[Next.js/compiler|تجميع]] bundling تلقائي. | * تصريف compiling و [[Next.js/compiler|تجميع]] bundling تلقائي. | ||
* تهيئة التحديث السريع لرياكت React Fast Refresh. | * تهيئة التحديث السريع لرياكت React Fast Refresh. | ||
| − | * تقديم الملفات الثابتة Static file serving من خلال المسار <code>public/</code> المرتبط بالعنوان الجذري | + | * تقديم الملفات الثابتة Static file serving من خلال المسار <code>public/</code> المرتبط بالعنوان الجذري <code>/</code>. |
سيكون كل تطبيق جاهزًا لمرحلة الإنتاج ابتداءً من لحظة إنشائه، وهذا ما سنراه في توثيق توزيع التطبيقات. | سيكون كل تطبيق جاهزًا لمرحلة الإنتاج ابتداءً من لحظة إنشائه، وهذا ما سنراه في توثيق توزيع التطبيقات. | ||
| سطر 111: | سطر 111: | ||
== الميزات الأساسية == | == الميزات الأساسية == | ||
| − | === [[Next.js/pages| | + | === [[Next.js/pages|الصفحات Pages]] === |
| − | === [[Next.js/data_fetching|إحضار البيانات | + | === [[Next.js/data_fetching|إحضار البيانات]] === |
| − | === [[Next.js/built_in_css_support|دعم تنسيقات CSS المدمجة | + | === [[Next.js/built_in_css_support|دعم تنسيقات CSS المدمجة]] === |
| − | === [[Next.js/layouts|تخطيطات الصفحة | + | === [[Next.js/layouts|تخطيطات الصفحة Layouts]] === |
| − | === [[Next.js/image optimization|تحسين الصور | + | === [[Next.js/image optimization|تحسين الصور]] === |
| − | === [[Next.js/font_optimization|تحسين خطوط الكتابة | + | === [[Next.js/font_optimization|تحسين خطوط الكتابة]] === |
| − | === [[Next.js/static_file_serving|تخديم الملفات الساكنة | + | === [[Next.js/static_file_serving|تخديم الملفات الساكنة]] === |
| − | === [[Next.js/fast_refresh|التحديث السريع | + | === [[Next.js/fast_refresh|التحديث السريع]] === |
| − | === [[Next.js/eslint|استخدام مدقق الشيفرة ESLint | + | === [[Next.js/eslint|استخدام مدقق الشيفرة ESLint]] === |
| − | === [[Next.js/typescript|استخدام TypeScript | + | === [[Next.js/typescript|استخدام TypeScript]] === |
| − | === [[Next.js/environment_variables|متغيرات البيئة | + | === [[Next.js/environment_variables|متغيرات البيئة]] === |
| − | === [[Next.js/supported_browsers_features|المتصفحات والميزات المدعومة | + | === [[Next.js/supported_browsers_features|المتصفحات والميزات المدعومة]] === |
| − | === [[Next.js/script|التعامل مع السكربتات | + | === [[Next.js/script|التعامل مع السكربتات]] === |
| − | == | + | == التوجيه Routing == |
| − | == [[Next.js/ | + | ===[[Next.js/Routing|توجيه المسارات]]=== |
| − | == [[Next.js/going_to_production|ما قبل مرحلة الإنتاج | + | ===[[Next.js/api_routes|مسارات الواجهة البرمجية API Routes]]=== |
| + | |||
| + | ==[[Next.js/going_to_production|ما قبل مرحلة الإنتاج]]== | ||
== [[Next.js/deployment|نشر تطبيقات Next.js]] == | == [[Next.js/deployment|نشر تطبيقات Next.js]] == | ||
| − | == [[Next.js/authentication|الاستيثاق | + | == [[Next.js/authentication|الاستيثاق Authentication]] == |
== [[Next.js/testing|اختبار تطبيقات Next.js]] == | == [[Next.js/testing|اختبار تطبيقات Next.js]] == | ||
| − | == [[Next.js/ | + | == [[Next.js/building forms|دليل بناء النماذج]] == |
== ميزات متقدمة == | == ميزات متقدمة == | ||
| سطر 154: | سطر 156: | ||
=== [[Next.js/compiler|مُصرِّف Next.js]] === | === [[Next.js/compiler|مُصرِّف Next.js]] === | ||
| − | === [[Next.js/preview_mode|نمط استعراض الصفحات | + | === [[Next.js/preview_mode|نمط استعراض الصفحات]] === |
| − | === [[Next.js/dynamic_import|الإدراج الديناميكي | + | === [[Next.js/dynamic_import|الإدراج الديناميكي]] === |
| − | === [[Next.js/automatic_static_optimization|التحسين الساكن التلقائي | + | === [[Next.js/automatic_static_optimization|التحسين الساكن التلقائي]] === |
| − | === [[Next.js/static_html_export|تصدير التطبيق إلى صفحات HTML ساكنة | + | === [[Next.js/static_html_export|تصدير التطبيق إلى صفحات HTML ساكنة]] === |
| − | === [[Next.js/module_path_aliases|المسارات المطلقة البديلة للمُدرجات و الوحدات البرمجية | + | === [[Next.js/module_path_aliases|المسارات المطلقة البديلة للمُدرجات و الوحدات البرمجية]] === |
=== [[Next.js/using_mdx|استخدام MDX مع Next.js]] === | === [[Next.js/using_mdx|استخدام MDX مع Next.js]] === | ||
| − | === [[Next.js/amp_support|دعم صفحات AMP | + | === [[Next.js/amp_support|دعم صفحات AMP]] === |
=== [[Next.js/customizing_babel_config|التهيئة المخصصة للمحلل Babel]] === | === [[Next.js/customizing_babel_config|التهيئة المخصصة للمحلل Babel]] === | ||
| − | === [[Next.js/customizing_postcss_config|إعدادات مخصصة للمصرّف PostCSS | + | === [[Next.js/customizing_postcss_config|إعدادات مخصصة للمصرّف PostCSS]] === |
| − | === [[Next.js/custom_server|استخدام خادم مخصص | + | === [[Next.js/custom_server|استخدام خادم مخصص]] === |
| − | === [[Next.js/custom_app|التطبيقات المخصصة باستخدام | + | === [[Next.js/custom_app|التطبيقات المخصصة باستخدام المكون <code>App</code>]] === |
| − | === [[Next.js/custom_document|المستندات المخصصة | + | === [[Next.js/custom_document|المستندات المخصصة باستخدام المكون <code>Document</code>]] === |
| − | === [[Next.js/custom_error_page|صفحات مخصصة لعرض الأخطاء | + | === [[Next.js/custom_error_page|صفحات مخصصة لعرض الأخطاء]] === |
| − | === [[Next.js/src_directory|المجلد <code>src</code> | + | === [[Next.js/src_directory|المجلد <code>src</code>]] === |
| − | === [[Next.js/multi_zones|دمج التطبيقات المفردة (الحيزات) | + | === [[Next.js/multi_zones|دمج التطبيقات المفردة (الحيزات)]] === |
=== [[Next.js/measuring_performance|قياس الأداء في تطبيقات Next.js]] === | === [[Next.js/measuring_performance|قياس الأداء في تطبيقات Next.js]] === | ||
| − | === [[Next.js/middleware|الأدوات الوسطية | + | === [[Next.js/middleware|الأدوات الوسطية]] === |
=== [[Next.js/debugging|تنقيح تطبيقات Next.js]] === | === [[Next.js/debugging|تنقيح تطبيقات Next.js]] === | ||
| − | === [[Next.js/error_handling|معالجة الأخطاء | + | === [[Next.js/error_handling|معالجة الأخطاء]] === |
| − | === [[Next.js/source_maps|ملفات الربط المصدرية | + | === [[Next.js/source_maps|ملفات الربط المصدرية]] === |
| − | === [[Next.js/codemods|تحويلات Codemods | + | === [[Next.js/codemods|تحويلات Codemods]] === |
| − | === [[Next.js/i18n_routing|الوجهات العالمية | + | === [[Next.js/i18n_routing|الوجهات العالمية]] === |
| − | === [[Next.js/output_file_tracing|تتبع ملفات الخرج | + | === [[Next.js/output_file_tracing|تتبع ملفات الخرج]] === |
| − | === [[Next.js/security_headers|ترويسات الأمان | + | === [[Next.js/security_headers|ترويسات الأمان]] === |
| − | === [[Next.js/react_18|استخدام React 18 | + | === [[Next.js/react_18|استخدام React 18]] === |
== [[Next.js/upgrading|دليل ترقية إصدارات Next.js]] == | == [[Next.js/upgrading|دليل ترقية إصدارات Next.js]] == | ||
| سطر 212: | سطر 214: | ||
== مرجع الواجهة البرمجية API Reference == | == مرجع الواجهة البرمجية API Reference == | ||
| − | === [[Next.js/cli|واجهة سطر الأوامر | + | === [[Next.js/cli|واجهة سطر الأوامر]] === |
=== [[Next.js/create_next_app|الأداة Create Next App]] === | === [[Next.js/create_next_app|الأداة Create Next App]] === | ||
| − | === [[Next.js/next_router| | + | === [[Next.js/next_router|المكون <code>next/router</code>]] === |
| − | |||
| − | |||
| − | === [[Next.js/ | + | === [[Next.js/next_link|المكون <code>next/link</code>]] === |
| − | === [[Next.js/ | + | === [[Next.js/next_image|المكون <code>next/image</code>]] === |
| − | === [[Next.js/ | + | === [[Next.js/next_script|المكون <code>next/script</code>]] === |
| − | === [[Next.js/ | + | === [[Next.js/next_head|المكون <code>next/head</code>]] === |
| − | === [[Next.js/ | + | === [[Next.js/next_amp|المكون <code>next/amp</code>]] === |
| − | === [[Next.js/ | + | === [[Next.js/next_server|المكون <code>next/server</code>]] === |
| − | === [[Next.js/edge_runtime|واجهة زمن التشغيل البرمجية الحدودية | + | === [[Next.js/edge_runtime|واجهة زمن التشغيل البرمجية الحدودية]] === |
| − | === [[Next.js/api data fetching|الواجهة البرمجية لإحضار البيانات | + | === [[Next.js/api data fetching|الواجهة البرمجية لإحضار البيانات]] === |
| − | === [[Next.js/static_optimization_indicator|مؤشر التحسين الساكن | + | === [[Next.js/static_optimization_indicator|مؤشر التحسين الساكن]] === |
| − | === [[Next.js/next.config.js|العمل مع ملف التهيئة <code>next.config.js</code> | + | === [[Next.js/next.config.js|العمل مع ملف التهيئة <code>next.config.js</code>]] === |
[[تصنيف:Next.js|{{SUBPAGENAME}}]] | [[تصنيف:Next.js|{{SUBPAGENAME}}]] | ||
مراجعة 14:31، 4 يناير 2023
إن أردت بناء تطبيق ويب باستخدام مكتبة 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 باللغة العربية!
متطلبات النظام:
- حزمة Node.js نسختها 14.6.0 أو أعلى
- نظام تشغيل ماك أو ويندوز (بما في ذلك منظومة ويندوز الفرعية لدعم لينكس WSL) أو لينكس.
التثبيت التلقائي لإطار عمل Next.js
من الأفضل أن تُنشئ تطبيقًا جديدًا باستخدام create-next-app وستثبت هذه العملية كل ما تحتاجه تلقائيًا. لإنشاء تطبيق جديد، اكتب التعليمات التالية في طرفية Node.js:
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
بإمكانك استخدام الراية typescript-- إن أردت ان تبدأ بمشروع TypeScript:
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app -- --typescript
عند اكتمال التثبيت:
- شغل خادم التطوير على العنوان
http://localhost:3000مستخدمًا إحدى التعليمات التالية:npm run devyarn devpnpm dev
- زر العنوان السابق للاطلاع على تطبيقك.
- عدّل الصفحة
pages/index.jsوراقب نتيجة ما فعلته في المتصفح.
لمزيد من المعلومات حول create-next-app، حاول الإطلاع على التوثيق الخاصة به.
التثبيت اليدوي
ثبت next و react و react-dom في مشروعك كالتالي:
npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom
افتح الملف package.json ثم أضف الشيفرة التالية:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
تشير هذه الشيفرة إلى المراحل المختلفة لتطوير التطبيق:
dev: ينفذ الأمرnext devللعمل مع Next.js في نمط التطوير.build: ينفذ الأمرnext buildلبناء تطبيق يعمل في نمط الإنتاج.start: ينفذ الأمرnext startلتشغيل خادم إنتاج Next.js.lint: ينفذ الأمرnext lintلتهيئة مدقق ESLint المدمج مع Next.js.
أنشئ بعد ذلك مجلدين الأول يحمل الاسم pages والآخر public ضمن الملف الجذري لتطبيقك:
pages: ويمثل جذرًا لعناوبن الملفات التي يضمها، إذ يقترن المسارpages/about.jsمثلًا بالمسارabout/.public: يخزّن موارد الدعم كالصور وخطوط الكتابة وغيرها. يمكن الإشارة إلى الملفات الموجودة ضمن هذا المجلد انطلاقًا من العنوان الجذري/تمامًا كالملفات الموجودة ضمنpages.
بُنيت Next.js على مفهوم الصفحات، والصفحة هي مكوّن رياكت React Component يُصدَّر من ملفات موجودة في المجلد pages تحمل إحدى الامتدادات التالية js. أو jsx. أو ts. أو tsx.. بإمكانك أيضًا إضافة معاملات المسارات الديناميكية مع اسم الملف.
ضع الملف index.js في المجلد pages حتى تبدأ العمل، فهي الصفحة التي يعرضها المتصفح عند زيارة المجلد الجذري لتطبيقك. وطّن الصفحة pages/index.js (اجعلها الصفحة الرئيسية) بإضافة المحتوى التالي لها:
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
بعد اكتمال التثبيت:
- نفّذ أحد الأوامر التالية لتشغّل خادم التطوير على العنوان
http://localhost:3000:npm run devyarn devpnpm dev
- زر العنوان
http://localhost:3000لاستعراض تطبيقك - عدّل في الصفحة
pages/index.jsلترى النتيجة مباشرة على متصفحك.
ما فعلناه حتى اللحظة:
- تصريف compiling و تجميع bundling تلقائي.
- تهيئة التحديث السريع لرياكت React Fast Refresh.
- تقديم الملفات الثابتة Static file serving من خلال المسار
public/المرتبط بالعنوان الجذري/.
سيكون كل تطبيق جاهزًا لمرحلة الإنتاج ابتداءً من لحظة إنشائه، وهذا ما سنراه في توثيق توزيع التطبيقات.