الفرق بين المراجعتين لصفحة: «Next.js/next head»

المراجعة الحالية بتاريخ 16:58، 3 يناير 2023

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

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
      </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 الرسمي.

@@ سطر 8: / سطر 8: @@
        <Head>
          <title>My page title</title>
-        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        </Head>
        <p>Hello world!</p>
@@ سطر 16: / سطر 15: @@
 export default IndexPage
 </syntaxhighlight>يمكنك استخدام الخاصية <code>key</code> لمنع نسخ نفس العنصر في الترويسة <code>head</code>، إذ تتأكد هذه الخاصية أن العنصر سيُصيَّر مرة واحدة كما في المثال التالي:<syntaxhighlight lang="javascript">
 import Head from 'next/head'
@@ سطر 35: / سطر 35: @@
 export default IndexPage
-</syntaxhighlight>يُصيَّر في هذه الحالة العنصر الثاني <code></ "meta property="og:title></code>، ويتعامل المكوّن <code>head</code> مع العناصر <code>meta</code> ذات السمة <code>key</code> المكررة تلقائيًا.<blockquote>يُحذف محتوى المكوّن <code>head</code> عند إزالته من شجرة المكوّنات، لهذا عليك التحقق من أن تحديد كل صفحة ما تحتاجه في الترويسة <code>head</code> دون تخمين ما أضافته الصفحات الأخرى.</blockquote>لا بد أن تكون العناصر <code>title</code> و <code>meta</code> وغيرها (مثل <code>script</code>) أبناءً مباشرين للعنصر <code>Head</code> أو أن تُغلف ضمن المستوى الأول من قائمة <code><React.Fragment></code> أو المصفوفات، وإلا لن يُلتقط العنصر بشكل صحيح عند التنقل في الواجهة الأمامية.<blockquote>ننصح باستخدام [[Next.js/next script|<code>next/script</code>]] في مكوّنك بدلًا من إنشاء العنصر يدويًا <code><script></code> ضمن المكوِّن <code>next/head</code>.</blockquote>
+</syntaxhighlight>يُصيَّر في هذه الحالة العنصر الثاني <code></ "meta property="og:title></code>، ويتعامل المكوّن <code>head</code> مع العناصر <code>meta</code> ذات السمة <code>key</code> المكررة تلقائيًا.<blockquote>يُحذف محتوى المكوّن <code>head</code> عند إزالته من شجرة المكوّنات، لهذا عليك التحقق من  تحديد كل صفحة ما تحتاجه في الترويسة <code>head</code> دون تخمين ما أضافته الصفحات الأخرى.</blockquote>لا بد أن تكون العناصر <code>title</code> و <code>meta</code> وغيرها (مثل <code>script</code>) أبناءً مباشرين للعنصر <code>Head</code> أو أن تُغلف ضمن المستوى الأول من قائمة <code><React.Fragment></code> أو المصفوفات، وإلا لن يُلتقط العنصر بشكل صحيح عند التنقل في الواجهة الأمامية.<blockquote>ننصح باستخدام [[Next.js/next script|<code>next/script</code>]] في مكوّنك بدلًا من إنشاء العنصر يدويًا <code><script></code> ضمن المكوِّن <code>next/head</code>.</blockquote>
+== أمثلة ==
+* [https://github.com/vercel/next.js/tree/canary/examples/head-elements Head Elements]
+* [https://github.com/vercel/next.js/tree/canary/examples/layout-component Layout Component]
 == المصادر ==
 * الصفحة [https://nextjs.org/docs/api-reference/next/head Next/head] من توثيق Next.js الرسمي.
+[[تصنيف:Next.js|{{SUBPAGENAME}}]]
+[[تصنيف:Next.js API|{{SUBPAGENAME}}]]