أساسيات التوجيه (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. هذا تحسين للأداء ويسمح لك بتبنيها بسهولة، ويمكنك أيضًا استخدام مكونات العميل.

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

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

يستخدم 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 قابلة للعنونة العامة.

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

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

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

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

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

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

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