مكون <Head>
نوفر مكونًا مدمجًا لإلحاق العناصر بجزء 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 للنصوص البرمجية
نوصي باستخدام next/script في مكونك بدلاً من إنشاء <script> يدويًا في next/head.
لا تستخدم علامات html أو body
لا يمكنك استخدام <Head> لتعيين سمات على علامات <html> أو <body>. سيؤدي هذا إلى خطأ next-head-count is missing. يمكن لـ next/head التعامل فقط مع العلامات داخل علامة <head> في HTML.