נתיבים דינמיים

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 8 מתוך 47.

לתפריט עם ארבעים מנות לא יוצרים ארבעים תיקיות. רוצים ש־/menu/pizza, /menu/pasta ו־/menu/tiramisu יהיו אותו עמוד שמציג נתונים שונים.

זו המשמעות של סוגריים מרובעים בשם של תיקייה:

app/
    menu/
        [slug]/
            page.jsx     ->  /menu/pizza
                         ->  /menu/pasta
                         ->  /menu/anything-at-all

תיקייה רגילה תואמת לשם שלה. תיקייה [bracketed] תואמת לכל מקטע וזוכרת למה היא התאימה. המילה שבתוך הסוגריים היא השם שבעזרתו תקרא את הערך בחזרה: [slug] נותנת לך את slug, [id] נותנת לך את id.

לאחר מכן מעביר את הערך הזה לדף כ־prop בשם params:

// app/menu/[slug]/page.jsx
export default async function Dish({ params }) {
    const { slug } = await params;

    return <h1>{slug}</h1>;
}

שלושה דברים קורים בקובץ הקטן הזה:

הדף מקבל מאפיין params. כל דף מקבל אחד, ובנתיב דינמי הוא מכיל את המקטעים שהותאמו.
params הוא Promise ב-Next 15, לכן צריך לבצע לו await. זו הסיבה שהרכיב הוא async. פרק 5 מסביר למה מותר לדפים להיות כאלה.
פירוק לגורמים שולף את slug, ששמו מגיע ישירות מהתיקייה [slug].

בקרו ב־/menu/pasta ו־slug הוא "pasta". קובץ אחד, כל המנות.

אתגר

קל

תיקיית הדינמיקה כבר קיימת: app/menu/[slug]/page.jsx מטפלת בכל כתובת URL תחת /menu. הבעיה היא שהיא מציגה pizza בלי קשר למנה שביקשת.

הפוך את הרכיב ל־async.
קרא את המקטע שהתאים באמצעות const { slug } = await params;.
הצג את slug בתוך <h1 id="dish"> במקום הטקסט הקבוע.

הבדיקות מבקרות בשתי מנות שונות ומצפות לשתי כותרות שונות.

נסו בעצמכם

import './globals.css';

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

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