المجلدات هي مسارات التوجيه
جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 5 من 47.
تطلب منك معظم أطر العمل كتابة مساراتك في مكان ما: قائمة بالمشارات، كل منها مقترن بـ component. بينما يقرؤها Next.js من شجرة الملفات بدلاً من ذلك.
القاعدة بأكملها تتلخص في سطر واحد: المجلد داخل app/ هو جزء من الرابط (URL)، و page.jsx الداخلي هو ما يراه الزوار.
app/
page.jsx -> /
about/
page.jsx -> /about
menu/
page.jsx -> /menu
drinks/
page.jsx -> /menu/drinksاقرأ عنوان URL بالانتقال إلى أسفل الشجرة. /menu/drinks هو مجلد menu، ثم مجلد drinks، ثم الصفحة الموجودة بداخله. تداخل المجلدات يؤدي إلى تداخل عناوين URL. لا توجد خطوة منفصلة.
النصف الآخر من القاعدة لا يقل أهمية: يكون المجلد فقط route عندما يحتوي على page.jsx.
app/
menu/
drinks/
page.jsx -> /menu/drinks works
MenuCard.jsx not a route
-> /menu 404هنا المجلد app/menu/ موجود، ولكن لا يمكن لأحد زيارة /menu: لا يوجد ملف page فيه. إنه مجرد حاوية في الطريق إلى /menu/drinks. هذه ميزة: يمكنك تجميع الملفات ذات الصلة في app/ دون نشر رابط URL بالخطأ.
اسم المجلد هو جزء من مسار URL، حرفًا بحرف. المجلد الذي يحمل الاسم About Us سيمنحك URL كـ /About%20Us، ولهذا السبب تكون مجلدات المسارات (route) مكتوبة بأحرف صغيرة وتصل بين كلماتها شرطات: app/about-us/.
جرّب بنفسك
لا يتضمّن هذا الدرس تحدّيًا برمجيًا.
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس أساسيات Next.js
4الخادم والعميل (Server & Client)
نوعان من المكوناتقراءة الخطأسطر 'use client'الحفاظ على أجزاء العميل صغيرةخادم داخل عميلملخص: الخادم والعميل2التوجيه والروابط
المجلدات هي مسارات التوجيهالمسارات المتداخلةربط الصفحاتالمسارات الديناميكيةصفحات غير موجودةملخص: التوجيه3التخطيطات والبيانات الوصفية
التخطيط الرئيسيالتنقل المشتركالتخطيطات المتداخلةالبيانات الوصفية للصفحةالبيانات الوصفية الديناميكيةملخص: التخطيطات6إجراءات الخادم (Server Actions)
ما هو إجراء الخادم (Server Action)؟نماذج تعمل وتتفاعلقراءة بيانات النموذجتحديث الصفحةملخص: إجراءات الخادم