التنقل المشترك

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

شريط التنقل هو الشيء الكلاسيكي الذي يُوضع في الـ layout: يُكتب مرة واحدة، ويكون موجودًا في كل مسار، ولا يتم إعادة إرساؤه (re-mounted) أبداً.

// app/layout.jsx
import Link from 'next/link';

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

لاحظ أين يقع {children}: بعد الـ nav. أي شيء تضعه قبله يظهر أعلى الصفحة، وأي شيء تضعه بعده يظهر أسفلها. الـ layout هو مجرد JSX. القاعدة الوحيدة هي أن {children} يجب أن يكون موجوداً في مكان ما هناك.

الآن أصبح التخطيط (layout) ملفك الخاص، وليس ملفًا مغلقًا. أضف الـ nav، ثم شاهده يظل في مكانه بينما تتغير الصفحة أسفله.

التحدي

سهل

قم بإنشاء شريط تنقل (nav bar) لـ Coddy Eats يظهر في كل صفحة.

في app/layout.jsx، داخل <body> وأعلى {children}، أضف:

عنصر <nav> مع id="nav"
داخله، عنصر <Link> يشير إلى / مع id="home-link" والنص Home
وعنصر <Link> يشير إلى /menu مع id="menu-link" والنص Menu

الصفحات مغلقة: ستعدل فقط على العرض (layout). ستتحقق الاختبارات من زيارة /menu بعد ذلك والتأكد من أن شريط التنقل لا يزال ظاهراً على الشاشة.

جرّب بنفسك

import './globals.css';
import Link from 'next/link';

export const metadata = {
    title: 'Coddy Eats',
};

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