Routing in NextJs

-------------------------------------

وهي من أهم مميزات NextJs لأنها تأتي متوفرة مع النسخة التي يتم تحميلها و لا يوجد أي تعديلات أو إضافات يمكننا أن نزيدها 

عندما نتحدث عن ال Routing في ReactJs فهي تشبه ألم المفاصل تعرف أي المشكل لكن لا تعرف كيف تتعامل معه

لنلقي نضرة عما يمكن أن يصير ملف ال Routing داخل ReactJs ثم سنعمل مقارنة بسيطة بين الإثنين

فبعد تحميل react-router-dom عن طريق npm 

نقوم بتهيئة ملف App ووضع فيه وصلاتنا الخاصة

في المثال السابق لا ننسى أنه مجرد مثال بسيط ، مع توسعة المشروع سيصير الأمر معقدا و صعب التعامل معه.

والآن سنرى كيف يمكننا التعامل مع نفس الحالة لكن عن طريق إستخدام NextJs Routing system

والذي يعتمد بالأساس على تسمية المجلدات داخل المشروع 

فكل مجلد يمثل مسارا معيننا بينما الملفات التي فيه تمثل الواجهة

ولكي نستطيع عمل نفس المسارات في الملف السابق يجب علينا إنشاء مجلدين تحت إسم about و register

وثم ننشأ ملفا خاصا يجب تسميته في كل مجلد ب page.tsx أو page.js

سنفهم أكثر كيفية عمل Routing in NextJs ونحن نبرمج 

يمكننا التعديل على ملف page.tsx الرئيسي في مجلد App 

 نقوم بتفريغ الملف وترك فقط الأشياء الضرورية

سنقوم بإنشاء مجلد خاص ب Components نضع فيه ملف جديد بإسم Navbar.jsx

سنعمل قائمة بسيطة فقط للشرح يعني قليلة الاستايلات 

يجب أن نضيف component إلى ملف layouts حيث سيظهر على مستوى جميع الصفحات

النتيجة هي كما يلي

نجرب الآن زيارة الروابط الأخرى

هذا المثال الذي عملنا عليه فهو مجرد مسارات بسيطة

ماذا عن المسارات المضمنة أو المسارات الديناميكية

لعمل مسارات متضمنة يمكننا " كما تفكرون "  أن تضع داخل المجلد الأب مجلدا أخر بإسم المسار الذي نريده

سأعمل مجلد بإسم projects ثم  أضع فيه مجلد آخر تحت اسم list ثم أضع page.tsx كملف ل Front-end

ثم بعد ذلك نكتب الأكواد التالية 

نعود إلى ملف page.tsx الموجود في مجلد الرئيسي app ثم نضيف له Link لكي نتمكن من زيارة المسار الذي وضعناه مسبقا

إذا ضغطنا على link في الصفحة الرئيسية  سننتقل مباشرة إلى صفحة ال Project List

لاحظ جيدا المسار كيف أصبح

فقد تبع نفس التسمية للمجلدات التي وضعناها من قبل

 وهكذا نحصل على المسارات المتضمنة أو ما يعرف ب Nested Routing

نمر الآن الى المسارات الديناميكية Dynamic Routing و سنرى مدى سهولة التعامل معها في NextJs

ومثل هذه المسارات عكس المسارات المتضمنة حيث تعتمد على البيانات الديناميكية التي تتغير بتغير ربما Slugs أو Ids

حيث لايمكننا النتكهن أسماءها لذلك لا نتعامل معها بنفس الطريقة كالمسارات المتضمنة 

وسنتطرق إلى هذه الأمور بالتفصيل في القادم إن شاء الله

---------------------------------------------------------

سنكون متفقين على أن مثلا جميع مواضيع المنتدى موجودة في قاعدة بيانات معينة وكذلك هناك العديد من المواضيع تعد بالملايين 

لكي نتعامل معها مثلا في  NextJs يمكننا عمل مجلد واحد بمتغير ما يمكننا من عرض المواضيع بشكل ديناميكي يتغير بتغير البيانات المعروضة

لنرى كيف مكننا عمل هذا بمساعدة NextJs Dynamic routing

سننشأ مجلدا يكون أسمه موضوع بين معقوفتين [slug] كمثال حيث أن slug هو المتغير الذي سنعتمد عليها في عرض الموضوع المناسب

نضع فيها كودا بسيطا

سنقوم بعمل لينكات خاصة بمشاريعنا ضمن ملف page.tsx داخل مجلد project/list

يمكنك أن تعمل الإستايل الذي يناسبك

النتيجة البسيطة هي

 إذا قمنا بالضغط على أحدهم سيقوم بتحويلنا إلى المسار الذي يحمل نفس Slug التي أعطيناه

مثال إذا ضغطنا على Project 1 فسيقوم بتحويلنا إلى صفحة ProjectDetails لكن المسار سيكون هو كما يلي

لكن المشكلة هو كلما زرنا أي لينك سيعرض لنا نفس الصفحة بدون تغيير ؟؟؟؟؟؟

لكي نصل للمتغير يجب أن نحصل على Params في NextJs

سنقوم بالتعديل على ملف ProjectDetails لكي يصير هكذا

النتيجة تغيرت كما يلي حاليا يمكننا جلب slug من خلال اللينك وسنرى كيف يمكننا أن نستفيد منه

هل تظن أننا إنتهينا ... لا بطبيعة الحال فهناك المزيد

تخيل معي أن مع كبر المشروع سيصير لدينا العديد من المجلدات و التي سيصعب علينا تتبعها و بالتالي التعامل معها

هنا تأتي NextJs بما يسمى Routing Group أو تجميع المسارات 

تخيل معي أن لدي مجموعة من المسارات الخاصة بالزبناء مثلا مسار Login - Register 

أو مسارات خاصة بالإدارة Dashboard - User Management - Project Management

وغيرها من المسارات فكيف يمكننا أن نجمعها في مجلد واحد دون أن نراه في Url 

سنضع مجلدا تحت إسم (auth) ثم نضع فيه مجلدين آخرين login و register

الآن نقوم بزيارة اللينك الموالي 

كما تلاحظون أن في المسار سحب على auth لم يظهرها وذهب مباشرة إلى صفحة Login 

وهذه ميزة أجدها في غاية الأهمية حيث ستمكننا أن ننظم عملنا بشكل أكبر و حتى إذا ذخل أي مبرمج عليه سيسهل عليه التعامل معه

في رعاية الله

مرحبا بكم وبأسئلتكم