كيفية تخصيص ملف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
المزيد من البرامج التعليمية التالية:
- الابتداء مع Next.js
- Next.js vs Gatsby vs create-response-app
- كيفية تثبيت Next.js
- ربط صفحتين في Next.js باستخدام Link
- محتوى ديناميكي في Next.js مع جهاز التوجيه
- قم بتغذية البيانات إلى مكون Next.js باستخدام getInitialProps
- تنميط مكونات Next.js باستخدام CSS
- الجلب المسبق للمحتوى في Next.js
- استخدام جهاز التوجيه لاكتشاف الارتباط النشط في Next.js
- اعرض المصدر لتأكيد عمل SSR في Next.js
- Next.js: ملء علامة الرأس بالعلامات المخصصة
- نشر تطبيق Next.js على الآن
- Next.js: قم بتشغيل التعليمات البرمجية فقط على جانب الخادم أو جانب العميل في Next.js
- نشر تطبيق Next.js في الإنتاج
- كيفية تحليل حزم تطبيقات Next.js
- وحدات التحميل الكسولة في Next.js
- إضافة مكون غلاف إلى تطبيق Next.js الخاص بك
- الرموز التي أضافها Next.js إلى تطبيقك
- حزم تطبيقات Next.js
- كيفية استخدام جهاز التوجيه Next.js
- كيفية استخدام مسارات Next.js API
- كيفية الحصول على ملفات تعريف الارتباط من جانب الخادم في تطبيق Next.js
- كيفية تغيير منفذ تطبيق Next.js