ربط الصفحات

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

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

import Link from 'next/link';

export default function Home() {
    return (
        <nav>
            <Link href="/about">About</Link>
        </nav>
    );
}

تبدو وكأنها <a>، وفي ملف الـ HTML النهائي هي بالفعل كذلك: نفس الـ href، وقابلة للنقر بالزر الأيمن، ومقروءة بواسطة قارئات الشاشة ومحركات البحث. إذن لماذا لا نكتب فقط <a href="/about">؟

بسبب ما يفعله المتصفح مع الروابط العادية: فهو يتخلص من الصفحة الحالية ويقوم بتحميل صفحة جديدة بالكامل. يعاد تنزيل كل سكريبت، ويبدأ React كليًا من الصفر، ويفقد كل شيء في الذاكرة: القائمة المفتوحة، والنموذج المملوء جزئيًا، والعناصر الموجودة في السلة.

يلتقط Link نقرة الماوس ويقوم بتبديل الجزء الذي يختلف فقط من الشاشة. لا يعاد تشغيل التطبيق أبدًا، وبالتالي تستمر حالة التطبيق (state) وتظهر الصفحة الجديدة فورًا.

<a href>: إعادة تحميل كاملة، إعادة تشغيل التطبيق، وفقدان الحالة (state)
<Link href>: نفس الـ URL، ونفس عنصر <a> في الـ HTML، بدون إعادة تحميل

القاعدة بسيطة: داخل تطبيقك، استخدم دائماً Link. احفظ <a> العادي للروابط التي تغادر موقعك.

التحدي

سهل

الصفحتان موجودتان ولكن لا توجد طريقة للتنقل بينهما. قم بربطهما باستخدام Link.

في كلا الملفين، قم باستيراد Link من next/link.
في app/page.jsx، أضف رابطًا إلى /about باستخدام id="to-about".
في app/about/page.jsx، أضف رابطًا للعودة إلى / باستخدام id="to-home".

نص الرابط متروك لك. ستقوم الاختبارات بالنقر على كل رابط والتحقق من وصولك إلى الصفحة الصحيحة.

جرّب بنفسك

import './globals.css';

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

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