مكون <Head> | Next.js العربية

أمثلة

نوفر مكونًا مدمجًا لإلحاق العناصر بقسم head للصفحة:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>عنوان صفحتي</title>
      </Head>
      <p>مرحبًا بالعالم!</p>
    </div>
  )
}

export default IndexPage

لتجنب تكرار العلامات في قسم head، يمكنك استخدام الخاصية key التي تضمين عرض العلامة مرة واحدة فقط، كما في المثال التالي:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>عنوان صفحتي</title>
        <meta property="og:title" content="عنوان صفحتي" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="عنواني الجديد" key="title" />
      </Head>
      <p>مرحبًا بالعالم!</p>
    </div>
  )
}

export default IndexPage

في هذه الحالة، يتم عرض علامة <meta property="og:title" /> الثانية فقط. يتم التعامل تلقائيًا مع علامات meta التي تحتوي على سمات key مكررة.

يتم مسح محتويات head عند إلغاء تحميل المكون، لذا تأكد من أن كل صفحة تحدد بالكامل ما تحتاجه في head دون افتراضات حول ما أضافته الصفحات الأخرى.

يجب أن تكون العناصر مثل title أو meta أو أي عناصر أخرى (مثل script) موجودة كأبناء مباشرين لعنصر Head، أو ملفوفة في مستوى واحد كحد أقصى من <React.Fragment> أو المصفوفات - وإلا لن يتم التعرف على العلامات بشكل صحيح أثناء التنقل على جانب العميل.

نوصي باستخدام next/script في مكونك بدلاً من إنشاء <script> يدويًا في next/head.