המתנה לפרמטרים של נתיב

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

נתיב דינמי מעביר לדף שלך את מקטע כתובת ה-URL באמצעות params. ב-Next 15 יש מלכודת שכדאי לזכור:

params היא הבטחה.

// app/menu/[slug]/page.jsx
export default async function DishPage({ params }) {
    const { slug } = await params;
    // /menu/carbonara  ->  slug === 'carbonara'
}

תשכחו מ־await, ושום דבר לא קורס — וזה בדיוק מה שהופך את הטעות הזאת לחמקמקה. פירוק של promise נותן לכם פשוט undefined:

const { slug } = params;   // undefined
const dish = await getDish(slug);   // לא מחפש דבר

הדף עדיין מוצג. הוא פשוט ריק, או מלא בתוכן חלופי, ואתה מחפש באגים בשכבת הנתונים שלך, אף שמעולם לא היו שם.

אותו כלל חל גם על searchParams. שניהם הבטחות, את שניהם צריך להמתין, ושניהם זמינים רק ברכיבי שרת מסוג async — סיבה נוספת לכך שהדף שכתבת עכשיו היה חייב להיות אסינכרוני.

למה בכלל להשתמש בהבטחות? כך Next.js יכול להתחיל לרנדר את החלקים בדף שלך שלא תלויים בכתובת ה-URL עוד לפני שהוא סיים לברר מהם החלקים שכן תלויים בה.

אתגר

קל

app/menu/[slug]/page.jsx כמעט נכונה, אבל היא לא מבצעת await ל־params, ולכן כל מנה מוצגת בתור Unknown dish.

המתן ל־params לפני פירוק למשתנים: const { slug } = await params;

lib/data.js ודף הבית נעולים. ביקור ב־/menu/carbonara חייב להציג את Carbonara בתוך #dish-name ואת המחיר שלה בתוך #dish-price.

נסו בעצמכם

import './globals.css';

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

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