فریم ورک Next.js برای اکثر توسعه‌دهندگان فرانت‌اند و فول‌استک به یکی از ابزارهای مهم و کارآمد تبدیل شده است. این فریم ورک امکانات مختلفی را برای بهبود عملکرد و سهولت توسعه نرم‌افزار ارائه می‌دهد. یکی از این امکانات، استفاده از کامپوننت <Head> است که به شما این امکان را می‌دهد تا محتوای <head> سند HTML خود را به راحتی در صفحات مختلف مدیریت کنید.
استفاده از کامپوننت <Head> در صفحات مختلف Next.js به شما اجازه می‌دهد که به سادگی عنوان صفحه، توضیحات متا و دیگر برچسب‌های <head> را تغییر دهید. این ویژگی به ویژه برای سئو و بهینه‌سازی موتورهای جستجو اهمیت زیادی دارد.
هر زمان که در پروژه‌های خود نیاز دارید تا برچسب‌های <meta>، <title> یا دیگر موارد مرتبط با <head> را تغییر دهید، می‌توانید از کامپوننت <Head> به صورت دینامیکی و بدون نگرانی از تداخل با دیگر صفحات، استفاده کنید.
در ادامه نگاهی خواهیم داشت به مثالی از نحوه استفاده از کامپوننت <Head> در یک پروژه Next.js و توضیح خواهیم داد هر خط از کد دقیقاً چه کاری انجام می‌دهد.
نمونه کد
import Head from 'next/head';
const MyComponent = () => {
return (
<div>
<Head>
<title>صفحه من</title>
<meta name="description" content="این توضیحات صفحه من است" />
</Head>
<h1>سلام دنیا!</h1>
</div>
);
};
export default MyComponent;
توضیحات کد خط به خط
import Head from 'next/head';
این خط کتابخانه Head را از فریم ورک Next.js برای استفاده در کامپوننت ما ایمپورت می‌کند. این کامپوننت برای مدیریت عناصر <head> استفاده می‌شود.
const MyComponent = () => {
تعریف یک کامپوننت فانکشنال به نام MyComponent که تمامی عناصر خود را داخل یک تابع برمی‌گرداند.
return ( <div> ... </div> );
این بخش، JSX را که توسط این کامپوننت رندر می‌شود، تعریف می‌کند. در اینجا <div> اصلی حاوی همه عناصر صفحه است.
<Head>...</Head>
درون این تگ، ما می‌توانیم هر چیزی که باید در <head> HTML قرار گیرد را تعیین کنیم، مانند <title> و <meta>.
<title>صفحه من</title>
تعیین عنوان صفحه‌ای که در تب مرورگر نمایش داده می‌شود.
<meta name="description" content="این توضیحات صفحه من است" />
اضافه کردن یک توضیح متا به سند HTML برای بهبود سئو و توصیف محتوا.
<h1>سلام دنیا!</h1>
تیتر اصلی صفحه را با یک پیام ساده تعیین می‌کند.
export default MyComponent;
باعث می‌شود که این کامپوننت به طور پیش‌فرض برای استفاده در دیگر فایل‌های پروژه قابلیت وارد شدن داشته باشد.