أساسيات التوجيه (Routing)

الهيكل الأساسي لكل تطبيق هو نظام التوجيه (Routing). ستقدم لك هذه الصفحة المفاهيم الأساسية لتوجيه الويب وكيفية التعامل مع التوجيه في Next.js.

المصطلحات

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

• الشجرة (Tree): اتفاقية لتصور هيكل هرمي. على سبيل المثال، شجرة مكونات بها مكونات أب وأبناء، هيكل مجلدات، إلخ.
• الشجرة الفرعية (Subtree): جزء من شجرة، يبدأ من جذر جديد (أول) وينتهي عند الأوراق (آخر).
• الجذر (Root): العقدة الأولى في شجرة أو شجرة فرعية، مثل تخطيط الجذر.
• الورقة (Leaf): عقد في شجرة فرعية ليس لها أبناء، مثل الجزء الأخير في مسار URL.

• مقطع URL (URL Segment): جزء من مسار URL محدد بشرطات مائلة.
• مسار URL (URL Path): جزء من URL يأتي بعد النطاق (مكون من مقاطع).

موجه app

في الإصدار 13، قدمت Next.js موجه تطبيق (App Router) جديد مبني على مكونات الخادم في React، والذي يدعم التخطيطات المشتركة، التوجيه المتداخل، حالات التحميل، معالجة الأخطاء، والمزيد.

يعمل موجه التطبيق في دليل جديد باسم app. يعمل دليل app جنبًا إلى جنب مع دليل pages للسماح بالتبني التدريجي. هذا يسمح لك باختيار بعض مسارات تطبيقك للسلوك الجديد مع الاحتفاظ بمسارات أخرى في دليل pages للسلوك السابق. إذا كان تطبيقك يستخدم دليل pages، يرجى أيضًا الاطلاع على وثائق موجه الصفحات (Pages Router).

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

بشكل افتراضي، المكونات داخل app هي مكونات خادم React. هذا تحسين للأداء ويسمح لك بتبنيها بسهولة، ويمكنك أيضًا استخدام مكونات العميل (Client Components).

توصية: تحقق من صفحة الخادم (Server) إذا كنت جديدًا على مكونات الخادم.

أدوار المجلدات والملفات

يستخدم Next.js موجهًا يعتمد على نظام الملفات حيث:

• المجلدات تستخدم لتعريف المسارات. المسار هو مسار واحد من المجلدات المتداخلة، يتبع التسلسل الهرمي لنظام الملفات من مجلد الجذر إلى مجلد الورقة النهائي الذي يتضمن ملف page.js. انظر تحديد المسارات.
• الملفات تستخدم لإنشاء واجهة مستخدم معروضة لمقطع مسار. انظر الملفات الخاصة.

مقاطع المسار

كل مجلد في مسار يمثل مقطع مسار (route segment). كل مقطع مسار يتم تعيينه إلى مقطع مقابِل في مسار URL.

المسارات المتداخلة

لإنشاء مسار متداخل، يمكنك تداخل المجلدات داخل بعضها البعض. على سبيل المثال، يمكنك إضافة مسار جديد /dashboard/settings عن طريق تداخل مجلدين جديدين في دليل app.

يتكون مسار /dashboard/settings من ثلاثة مقاطع:

• / (مقطع الجذر)
• dashboard (مقطع)
• settings (مقطع الورقة)

اصطلاحات الملفات

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

جيد أن تعرف: يمكن استخدام امتدادات الملفات .js أو .jsx أو .tsx للملفات الخاصة.

تسلسل المكونات الهرمي

يتم عرض مكونات React المعرفة في الملفات الخاصة لمقطع مسار في تسلسل هرمي محدد:

• layout.js
• template.js
• error.js (حدود خطأ React)
• loading.js (حدود تعليق React)
• not-found.js (حدود خطأ React)
• page.js أو layout.js متداخل

في مسار متداخل، سيتم تداخل مكونات المقطع داخل مكونات مقطع الأب.

التواجد المشترك

بالإضافة إلى الملفات الخاصة، لديك خيار وضع ملفاتك الخاصة (مثل المكونات، الأنماط، الاختبارات، إلخ) داخل مجلدات في دليل app.

هذا لأنه بينما تحدد المجلدات المسارات، فقط المحتويات التي يتم إرجاعها بواسطة page.js أو route.js قابلة للعنونة بشكل عام.

تعلم المزيد حول تنظيم المشروع والتواجد المشترك.

أنماط التوجيه المتقدمة

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

• المسارات المتوازية (Parallel Routes): تسمح لك بعرض صفحتين أو أكثر في نفس العرض في وقت واحد يمكن التنقل بينها بشكل مستقل. يمكنك استخدامها لعروض مقسمة لها تنقل فرعي خاص بها. مثل لوحات التحكم.
• مسارات الاعتراض (Intercepting Routes): تسمح لك باعتراض مسار وعرضه في سياق مسار آخر. يمكنك استخدام هذه عندما يكون الحفاظ على سياق الصفحة الحالية مهمًا. مثل رؤية جميع المهام أثناء تحرير مهمة واحدة أو توسيع صورة في موجز.

تتيح لك هذه الأنماط بناء واجهات مستخدم أكثر ثراءً وتعقيدًا، مما يجعل الميزات التي كانت معقدة تاريخيًا لفريق صغيرة والمطورين الأفراد قابلة للتنفيذ.

الخطوات التالية

الآن بعد أن فهمت أساسيات التوجيه في Next.js، اتبع الروابط أدناه لإنشاء مساراتك الأولى: