generateImageMetadata، generateSitemaps و generateViewport در Next.js — تولید داینامیک متادیتا برای تصاویر، نقشه سایت و تنظیمات نمای صفحه

۱. generateImageMetadata — تولید نسخه‌های مختلف از یک تصویر

تابع generateImageMetadata به شما اجازه می‌دهد چند نسخه از یک تصویر (مثلاً آیکون) یا چند تصویر برای یک segment تولید کنید. این تابع باید یک آرایه از آبجکت‌هایی شامل id، size، alt و contentType بازگرداند.

مثال ساده:

export function generateImageMetadata() {
  return [
    { id: 'small', size: { width: 48, height: 48 }, contentType: 'image/png' },
    { id: 'medium', size: { width: 72, height: 72 }, contentType: 'image/png' },
  ]
}

استفاده از پارامترهای داینامیک:

export function generateImageMetadata({ params }) {
  return [
    { id: params.slug, size: { width: 64, height: 64 }, contentType: 'image/png' },
  ]
}

تابع تولید تصویر:

export default async function Icon({ id }) {
  const iconId = await id
  return new ImageResponse(<div>Icon {iconId}</div>)
}

۲. generateSitemaps — تولید چند نقشه سایت

تابع generateSitemaps برای تقسیم نقشه سایت به چند فایل استفاده می‌شود. این تابع باید آرایه‌ای از { id } بازگرداند و سپس از آن برای تولید sitemapهای جداگانه استفاده شود.

مثال:

export async function generateSitemaps() {
  return [{ id: 0 }, { id: 1 }]
}

export default async function sitemap({ id }) {
  const start = id * 50000
  const end = start + 50000
  const products = await getProducts(`...`)
  return products.map((p) => ({
    url: `/product/${p.id}`,
    lastModified: p.date,
  }))
}

۳. generateViewport — تنظیم داینامیک نمای صفحه

برای سفارشی‌سازی نمای اولیه صفحه (viewport)، می‌توانید از آبجکت viewport یا تابع generateViewport استفاده کنید. این قابلیت فقط در Server Components پشتیبانی می‌شود.

مثال ساده:

export const viewport = {
  themeColor: 'black',
}

مثال با media query:

export const viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'cyan' },
    { media: '(prefers-color-scheme: dark)', color: 'black' },
  ],
}

مثال داینامیک با پارامتر:

export function generateViewport({ params }) {
  return {
    themeColor: params.id === 'dark' ? 'black' : 'white',
  }
}

جمع‌بندی

با استفاده از generateImageMetadata، generateSitemaps و generateViewport می‌توانید متادیتای تصاویر، نقشه‌های سایت و تنظیمات نمای صفحه را به‌صورت داینامیک و قابل برنامه‌ریزی تولید کنید. این قابلیت‌ها به شما کمک می‌کنند تجربه‌ای بهینه، مقیاس‌پذیر و شخصی‌سازی‌شده در Next.js بسازید.