الفرق بين المراجعتين ل"Next.js/next head"
< Next.js
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط |
|||
| سطر 8: | سطر 8: | ||
<Head> | <Head> | ||
<title>My page title</title> | <title>My page title</title> | ||
| − | |||
</Head> | </Head> | ||
<p>Hello world!</p> | <p>Hello world!</p> | ||
| سطر 16: | سطر 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' | ||
| سطر 35: | سطر 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]] | ||
| + | [[تصنيف:Next.js API]] | ||
مراجعة 16:26، 1 يناير 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 الرسمي.