البيانات الوصفية للصفحة

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

علامة تبويب المتصفح، والإشارة المرجعية، ونتيجة Google، والمعاينة الأولية للرابط في الدردشة: جميعها تقرأ علامات <title> و <meta> الخاصة بالصفحة. أبدًا لا تقوم بكتابة هذه العلامات يدويًا في Next.js.

بدلاً من ذلك، تُصدّر الصفحة أو التخطيط كائنًا يسمى metadata:

// app/menu/page.jsx
export const metadata = {
    title: 'Our Menu',
    description: 'Everything we cook.',
};

export default function Menu() {
    return <h1>Our Menu</h1>;
}

الاسم مهم: يجب أن يكون metadata بالضبط، ومُصدَّرًا (exported) من ملف المسار (route file). يقرؤه Next.js أثناء الصيرورة (rendering) ويكتب الـ head نيابة عنك.

تُدمج Metadata أسفل الشجرة، بنفس الترتيب من الخارج إلى الداخل كما في التخطيطات: يحدد root layout الإعدادات الافتراضية، ويمكن لأي page تجاوزها. أي page لا تحتوي على export لـ metadata ترث ببساطة ما حدده التخطيط، ولهذا السبب تسمت كل page حتى الآن على اسم root layout الخاص بك.

التحدي

مبتدئ

في الوقت الحالي، تعرض كل علامة تبويب في Coddy Eats الاسم Coddy Eats، لأن هذا ما يحدده المخطط الرئيسي (root layout). صفحة القائمة تستحق عنوانًا خاصًا بها.

في app/menu/page.jsx، وأعلى المكون، قم بتصدير كائن metadata باستعمال export.
امنحه title بقيمة Our Menu بالضبط.

تقرأ الاختبارات عنوان المستند على /، ثم تنتقل إلى /menu وتقرأه مرة أخرى.

جرّب بنفسك

import './globals.css';

export const metadata = {
    title: 'Coddy Eats',
};

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