المسارات الديناميكية

جزء من قسم أساسيات 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] يطابق أي جزء (segment) ويتذكر ما قام بمطابقته. الكلمة الموجودة داخل الأقواس هي الاسم الذي ستقرأ القيمة من خلاله: المجلد [slug] يعطيك slug، والمجلد [id] يعطيك id.

يمرر Next هذه القيمة إلى الصفحة كـ prop يُسمى params:

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

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

حدثت ثلاثة أشياء في هذا الملف الصغير:

تأخذ الصفحة خاصية (prop) باسم params. تحصل كل صفحة على واحدة، وبالنسبة للمسار الديناميكي، فإنها تحتوي على الأجزاء المطبقة.
تكون params عبارة عن Promise في Next 15، لذا يجب عليك استخدام await معها. ولهذا السبب تكون المكونات async. يوضح الفصل 5 سبب السماح للصفحات بأن تكون كذلك.
يستخرج التفكيك (Destructuring) المتغير slug، والذي يأتي اسمه مباشرة من المجلد [slug].

زر /menu/pasta و slug تكون "pasta". ملف واحد، كل طبق.

التحدي

سهل

المجلد الديناميكي موجود بالفعل: app/menu/[slug]/page.jsx يستجيب لكل مسار URL تحت /menu. المشكلة هي أنه يعرض pizza بغض النظر عن الوجبة التي طلبتها.

اجعل المكون async.
اقرأ الجزء المطابق باستخدام const { slug } = await params;.
اعرض slug داخل <h1 id="dish"> بدلاً من النص المكتوب برمجياً بشكل ثابت (hardcoded).

تختبر الاختبارات وجبتين مختلفين وتتوقع عنوانين مختلفين.

جرّب بنفسك

import './globals.css';

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

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