الرابط النشط

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

كل موقع يحتوي على شريط تنقل يبرز الرابط الذي تتواجد فيه حالياً. للقيام بذلك، يجب أن يعلم المكون شيئاً واحداً لا يمكن للخادم إخباره به بعد وقوع الحدث: ما هو عنوان URL المعروض على الشاشة حالياً.

يقدمه لك next/navigation:

'use client';

import { usePathname } from 'next/navigation';

export default function Nav() {
    const pathname = usePathname();
    // في /about، يكون pathname هو السلسلة '/about'
}

إنه hook، لذا تنطبق القواعد التي تعرفها بالفعل: إنه يعمل فقط داخل مكون يبدأ ملفه بـ 'use client'. هذا هو السبب الرئيسي في أن شريط التصفح (nav) يكون عادةً أحد مكونات العميل (client components) القليلة في تطبيق يعتمد على التقديم عبر الخادم (server-rendered): فيجب إعادة تشغيله عند كل تغيير في المسار (route).

من هناك، تصبح عملية مقارنة بسيطة:

<Link
    href="/menu"
    className={pathname === '/menu' ? 'nav-link active' : 'nav-link'}
>
    Menu
</Link>

لاحظ أين يعيش الـ nav: في الـ layout. يتم تصييره مرة واحدة ويبقى مع كل تنقل، لذا فإن تغيير pathname هو ما يعيد تصييره، وليس إعادة التركيب (remount).

التحدي

سهل

شريط التنقل يعمل، ولكن لا شيء يوضح الصفحة التي تتواجد عليها حاليًا. قم بإصلاح ذلك في components/Nav.jsx.

قم باستدعاء usePathname() وتخزينه في pathname.
امنح كل رابط الـ className بقيمة "nav-link active" عندما يطابق href الخاص به pathname، وبقيمة "nav-link" عدا ذلك.

يشير رابط الـ Home إلى /، ورابط الـ Menu إلى /menu.

جرّب بنفسك

import './globals.css';
import Nav from '../components/Nav.jsx';

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

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