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

جزء من قسم أساسيات Next.js في رحلة React على Coddy. الدرس 6 من 47.

حان وقت التنفيذ. إضافة page إلى app في Next.js تتطلب خطوتين: أنشئ مجلدًا، وضع فيه page.jsx.

// app/about/page.jsx   ->  /about
export default function About() {
    return <h1>About us</h1>;
}

هذا هو الملف بأكمله. لا يوجد جدول مسارات لتحديثه، ولا استيراد في أي مكان آخر، ولا شيء تحتاج إلى إعادة تشغيله. المكوّن هو React عادي. الشيء الوحيد الذي حوّله إلى عنوان URL هو المكان الذي حفظته فيه.

تفصيلان يستحقان تثبيتهما:

يجب أن يكون default export: فهذه هي الطريقة التي يختار بها Next.js مكوّن الصفحة من الملف.
اسم المكوّن من اختيارك. About، AboutPage، Whatever: يأتي عنوان URL من المجلد، وليس من الدالة مطلقًا.

هل تريد /about/team أيضًا؟ أنشئ app/about/team/ وضع ملف page.jsx آخر هناك. لا يتغير النمط مع نمو الموقع، وهذا هو الهدف.

التحدي

مبتدئ

يحتوي app على page رئيسية. أضف إليه page باسم about.

أكمل الملف app/about/page.jsx.
صدّر مكوّنًا باستخدام default منه.
يجب أن يعيد <h1> مع id="about-title" والنص المطابق تمامًا About us.

اترك app/page.jsx كما هو: ستزور الاختبارات كلا عنوانَي URL.

جرّب بنفسك

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}