Next.js: ملء علامة الرأس بالعلامات المخصصة

كيفية تخصيص ملفheadعلامة تطبيق Next.js الخاص بك

من أي مكون صفحة Next.js ، يمكنك إضافة معلومات إلى رأس الصفحة.

يكون هذا مفيدًا عندما:

  • تريد تخصيص عنوان الصفحة
  • تريد تغيير meta tag

كيف يمكنك فعل ذلك؟

داخل كل مكون يمكنك استيراد ملفHeadمكون منnext/headوقم بتضمينه في إخراج مكون JSX الخاص بك:

import Head from 'next/head'

const House = props => ( <div> <Head> <title>The page title</title> </Head> {/* the rest of the JSX */} </div> )

export default House

يمكنك إضافة أي علامة HTML تريد أن تظهر في<head>قسم من الصفحة.

عند تركيب المكون ، سيتأكد Next.js من العلامات الموجودة بالداخلHeadتضاف إلى عنوان الصفحة. نفس الشيء عند إلغاء تثبيت المكون ، سيهتم Next.js بإزالة تلك العلامات.

تحميل مجانيكتيب Next.js


المزيد من البرامج التعليمية التالية: