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

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

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

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

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

تفصيلان يستحقان التركيز عليهما:

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

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

التحدي

مبتدئ

يحتوي التطبيق على صفحة رئيسية. أضف له صفحة "عنا" (about).

أنشئ الملف app/about/page.jsx.
قم بعمل default export لمكوّن (component) منه.
يجب أن يعيد عنصر <h1> مع id="about-title" والنص الدقيق About us.

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

جرّب بنفسك

import './globals.css';

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

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