Head
نوفر مكونًا مدمجًا لإلحاق العناصر بـ head للصفحة:
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
</Head>
<p>Hello world!</p>
</div>
)
}
export default IndexPageتجنب العلامات المكررة
لتجنب العلامات المكررة في head، يمكنك استخدام خاصية key، والتي تضم أن العلامة تُعرض مرة واحدة فقط، كما في المثال التالي:
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" /> الثانية فقط. يتم التعامل تلقائيًا مع علامات meta التي لها سمات key مكررة.
معلومة مفيدة: يتم التحقق تلقائيًا من العلامات
<title>و<base>بحثًا عن التكرار بواسطة Next.js، لذا ليس من الضروري استخدام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.