فهم متادیتا و گزینه‌های generateMetadata در Next.js
اگر شما با Next.js کار کرده باشید، حتماً متوجه شده‌اید که این فریم‌ورک به شما اجازه می‌دهد تا به راحتی متادیتا (metadata) را برای برنامه‌های خود تنظیم کنید. متادیتا اطلاعاتی است که می‌تواند شامل عنوان صفحه، توضیحات، کلمات کلیدی و موارد دیگر باشد. این اطلاعات در SEO (بهینه‌سازی موتور جستجو) بسیار اهمیت دارد و می‌تواند تأثیر زیادی بر روی دیده شدن صفحات وب شما داشته باشد.
در نسخه‌های جدید Next.js، ما یک ویژگی به نام generateMetadata داریم که به ما امکان می‌دهد تا به صورت پویا متادیتا را برای هر صفحه ایجاد کنیم. این گزینه به خصوص زمانی مفید است که شما به وب‌سایت‌هایی با محتوای متغیر و غیر ثابت کار می‌کنید. با استفاده از این گزینه، می‌توانید مشخص کنید که متادیتا بر اساس داده‌های خاص هر درخواست باید چه باشد.
حالا بیایید نگاهی به نحوه استفاده از generateMetadata بیندازیم. مثلاً فرض کنید شما یک وب‌سایت خبری دارید و هر خبر شامل عنوان و توضیحات خاص خود است. شما می‌توانید با استفاده از generateMetadata این ویژگی را به صفحه‌تان اضافه کنید تا به صورت خودکار متادیتا را برای هر خبر تنظیم کند.
در ادامه، ما مثالی ساده از چگونگی استفاده از generateMetadata را بررسی خواهیم کرد. من قصد دارم یک ساختار پایه‌ای برای این کار ارائه کنم. در اینجا یک کد نمونه از ساختار فایل‌های Next.js را می‌بینید:
export async function generateMetadata({ params }) {
const { id } = params;
const newsItem = await getNewsById(id);
return {
title: newsItem.title,
description: newsItem.description,
};
}
توضیحات کد
در این کد، ما ابتدا تابع generateMetadata را تعریف می‌کنیم که یک پارامتر به نام params دریافت می‌کند. این پارامتر معمولا شامل اطلاعاتی است که به ما اجازه می‌دهد تا اطلاعات خاص هر صفحه را به‌دست آوریم.
سپس با استفاده از const { id } = params;، شناسه خبر را از پارامترهای ورودی بیرون می‌کشیم. این شناسه برای بارگذاری اطلاعات خبر مورد استفاده قرار می‌گیرد.
حال، با استفاده از تابعی به نام getNewsById(id)، ما اطلاعات خبر را بر اساس شناسه آن بارگذاری می‌کنیم. این تابع می‌تواند مثلاً از یک API یا یک پایگاه داده اطلاعات خبر را دریافت کند.
در نهایت، ما یک شیء را برمی‌گردانیم که شامل دو خاصیت است: title و description. این‌ها متادیتای مربوط به خبر ما هستند که به طور خودکار تنظیم می‌شوند. این متادیتا در <head> صفحه شما به کار خواهد رفت.