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

من موسوعة حسوب
مرئينص الويكي
أنشأ الصفحة ب' = الواجهة البرمجيّة للمكون next/head في Next.js = يُستخدم هذا العنصر المدمج في ربط العناصر إلى ترويسة...'
 
طلا ملخص تعديل
 
(4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الواجهة البرمجيّة للمكون next/head في Next.js}}</noinclude>
= الواجهة البرمجيّة للمكون next/head في Next.js =
يُستخدم هذا العنصر المدمج في ربط العناصر إلى ترويسة الصفحة:<syntaxhighlight lang="javascript">
يُستخدم هذا العنصر المدمج في ربط العناصر إلى ترويسة الصفحة:<syntaxhighlight lang="javascript">
import Head from 'next/head'
import Head from 'next/head'
سطر 9: سطر 8:
       <Head>
       <Head>
         <title>My page title</title>
         <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
       </Head>
       <p>Hello world!</p>
       <p>Hello world!</p>
سطر 17: سطر 15:


export default IndexPage
export default IndexPage
</syntaxhighlight>يمكنك استخدام الخاصية <code>key</code> لمنع نسخ نفس العنصر في الترويسة <code>head</code>، إذ تتأكد هذه الخاصية أن العنصر سيُصيَّر مرة واحدة كما في المثال التالي:<syntaxhighlight lang="javascript">
</syntaxhighlight>يمكنك استخدام الخاصية <code>key</code> لمنع نسخ نفس العنصر في الترويسة <code>head</code>، إذ تتأكد هذه الخاصية أن العنصر سيُصيَّر مرة واحدة كما في المثال التالي:<syntaxhighlight lang="javascript">
import Head from 'next/head'
import Head from 'next/head'
سطر 36: سطر 35:


export default IndexPage
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 الرسمي.
* الصفحة [https://nextjs.org/docs/api-reference/next/head Next/head] من توثيق Next.js الرسمي.
[[تصنيف:Next.js|{{SUBPAGENAME}}]]
[[تصنيف:Next.js API|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 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 الرسمي.
مجلوبة من «https://wiki.hsoub.com/index.php?title=Next.js/next_head&oldid=32538»