קישור בין דפים

חלק מהיחידה היסודות של 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 מיירטת את הלחיצה ומחליפה רק את החלק במסך שבאמת השתנה. האפליקציה לא מופעלת מחדש, כך שהמצב נשמר והדף החדש מופיע מיד.

<a href>: טעינה מחדש מלאה, האפליקציה מופעלת מחדש, המצב אובד
<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>
    );
}