البيانات الوصفية الديناميكية

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

كائن الـ metadata هو قيمة ثابتة (constant)، لذا لا يمكنه المساعدة في المسار الديناميكي: app/dishes/[slug]/page.jsx يقدم طبقاً مختلفاً عند كل عنوان URL، وكل واحد منها يحتاج إلى title خاص به.

لذلك، قم بتصدير function بدلاً من ذلك:

export async function generateMetadata({ params }) {
    const { slug } = await params;
    return { title: DISHES[slug].name };
}

يحصل على نفس الـ params التي تحصل عليها الصفحة (عبارة عن promise، لذا تقوم بعمل await له) ويرجع نفس الشكل الذي يملكه كائن metadata. استخدم أحدهما أو الآخر، ولا تستخدم كلاهما أبداً في نفس الملف.

قوالب العنوان (Title templates)

تكرار اسم الموقع في عنوان كل صفحة يصبح أمرًا مملًا. يمكن لملف الـ layout أن يمرر نمطًا محددًا بدلاً من نص عادي:

// app/layout.jsx
export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

default: العنوان المخصص للصفحات التي لا تحدد أي عنوان
template: النمط المخصص للصفحات التي تحدد عنوانًا؛ حيث يوضع عنوانها مكان %s

لذا فإن الصفحة التي تُرجع title: 'Margherita' تظهر كـ Margherita | Coddy Eats في علامة التبويب، بينما الصفحة الرئيسية، التي لا تحدد أي شيء، تبقى Coddy Eats. اكتب العلامة التجارية مرة واحدة، في الـ layout.

التحدي

متوسط

تعرض كل صفحة طبق حالياً Coddy Eats في علامة التبويب (tab). أعطِ كل واحدة منها عنواناً خاصاً بها.

في app/dishes/[slug]/page.jsx، أضف دالة async مُصدَّرة (exported) باسم generateMetadata تقوم بـ:

تأخذ { params } وتنتظرها استخدام await للحصول على slug
ترجع { title: DISHES[slug].name }

تحتوي app/layout.jsx بالفعل على القالب '%s | Coddy Eats'، لذا فإن /dishes/margherita ينبغي أن تنتهي بالعنوان Margherita | Coddy Eats. ألقِ نظرة على التخطيط (layout): لست بحاجة إلى تغييره.

جرّب بنفسك

import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

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