انتظار معلمات المسار (Route Params)

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

يسلّم المسار الديناميكي (dynamic route) الجزء الخاص بـ URL إلى صفحتك عبر params. في Next 15 هناك الملاحظة التالية التي تستحق الحفظ:

params هو Promise.

// 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);   // يبحث عن لا شيء

لا تزال الصفحة تُعرض. لكنها فارغة تمامًا، أو مليئة ببدائل الطوارئ (fallbacks)، وتبدأ في البحث عبر طبقة البيانات لديك عن خطأ لم يكن موجودًا من الأساس.

تنطبق القاعدة نفسها على searchParams. كلاهما عبارة عن promises، وكلاهما يتطلب استخدام await، وكلاهما متاح فقط لمكونات الخادم من النوع async، وهو سبب آخر وجوب كون الصفحة التي كتبتها للتو من نوع async.

لماذا نستخدم الـ promises على الإطلاق؟ لكي يتمكن Next.js من البدء في عرض أجزاء صفحتك التي لا تعتمد على عنوان URL قبل أن ينتهي من معالجة الأجزاء التي تعتمد عليه.

التحدي

سهل

ملف app/menu/[slug]/page.jsx صحيح تقريبًا، ولكنه لا يقوم بعقل await لـ params أبداً، لذلك تعود كل وجبة كـ Unknown dish.

استخدم await مع params قبل التفكيك (destructuring): 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>
    );
}