الواجهة البرمجيّة للمكون next/head في Next.js

يُستخدم هذا العنصر المدمج في ربط العناصر إلى ترويسة الصفحة:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

يمكنك استخدام الخاصية key لمنع نسخ نفس العنصر في الترويسة head، إذ تتأكد هذه الخاصية أن العنصر سيُصيَّر مرة واحدة كما في المثال التالي:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

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

يُحذف محتوى المكوّن head عند إزالته من شجرة المكوّنات، لهذا عليك التحقق من أن تحديد كل صفحة ما تحتاجه في الترويسة head دون تخمين ما أضافته الصفحات الأخرى.

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

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

المصادر

الصفحة Next/head من توثيق Next.js الرسمي.