البيانات الوصفية (Metadata)
ماذا لو أردنا تعديل البيانات الوصفية للصفحة، مثل وسم <title> في HTML؟
<title> هو جزء من وسم <head> في HTML، لذا دعونا نتعمق في كيفية تعديل وسم <head> في صفحة Next.js.
افتح ملف pages/index.js في محرر الأكواد وابحث عن الأسطر التالية:
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>لاحظ أن <Head> مستخدم بدلاً من <head> بحروف صغيرة. <Head> هو مكون (Component) React مدمج في Next.js. يسمح لك بتعديل <head> للصفحة.
يمكنك استيراد مكون Head من وحدة next/head.
إضافة Head إلى first-post.js
لم نضف <title> إلى مسار /posts/first-post الخاص بنا. دعونا نضيف واحدًا.
افتح ملف pages/posts/first-post.js وأضف استيرادًا لـ Head من next/head في بداية الملف:
import Head from 'next/head';ثم قم بتحديث مكون FirstPost المصدر ليشمل مكون Head. في الوقت الحالي، سنضيف فقط وسم title:
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</>
);
}جرب الوصول إلى http://localhost:3000/posts/first-post. يجب أن يظهر الآن في علامة المتصفح "First Post". باستخدام أدوات المطور في المتصفح، يجب أن ترى أن وسم title قد تمت إضافته إلى <head>.
لمعرفة المزيد عن مكون
Head، راجع مرجع API لـnext/head.إذا كنت تريد تخصيص وسم
<html>، على سبيل المثال لإضافة سمةlang، يمكنك القيام بذلك عن طريق إنشاء ملفpages/_document.js. تعلم المزيد في توثيقDocumentالمخصص.