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 باللغة العربية!

متطلبات النظام:

• حزمة 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 dev
  • yarn dev
  • pnpm 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 dev
  • yarn dev
  • pnpm dev
• زر العنوان http://localhost:3000 لاستعراض تطبيقك
• عدّل في الصفحة pages/index.js لترى النتيجة مباشرة على متصفحك.

ما فعلناه حتى اللحظة:

• تصريف compiling و تجميع bundling تلقائي.
• تهيئة التحديث السريع لرياكت React Fast Refresh.
• تقديم الملفات الثابتة Static file serving من خلال المسار public/ المرتبط بالعنوان الجذري /.

سيكون كل تطبيق جاهزًا لمرحلة الإنتاج ابتداءً من لحظة إنشائه، وهذا ما سنراه في توثيق توزيع التطبيقات.

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

الصفحات 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 في الوقت نفسه.