Menu
Coddy logo textTech
flag Ar iconالعربيةdown icon

المجلدات هي مسارات التوجيه

جزء من قسم أساسيات 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/.

جرّب بنفسك

لا يتضمّن هذا الدرس تحدّيًا برمجيًا.

quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس أساسيات Next.js