بخش دوم - عکس و آیکون

Favicons

faviconها آیکون‌های کوچکی هستند که سایت شما را در bookmarks و search results نشان می‌دهند. یک فایل favicon.ico در root پروژه قرار دهید.

Static Open Graph images

OG images تصاویری هستند که سایت شما را در social media نمایش می‌دهند. یک فایل opengraph-image.jpg در root پروژه قرار دهید.

همچنین می‌توانید برای روت‌های خاص OG image جداگانه بسازید؛ مثلاً برای روت /blog یک opengraph-image.jpg داخل فولدر blog قرار دهید.

فرمت‌های jpeg، png، gif هم پشتیبانی می‌شوند.

Generated Open Graph images

constructor ImageResponse به شما اجازه می‌دهد تصاویر داینامیک را با JSX و CSS تولید کنید:

import { ImageResponse } from 'next/og'
import { getPost } from '@/app/lib/data'

export const size = {
  width: 1200,
  height: 630,
}

export const contentType = 'image/png'

export default async function Image({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)

  return new ImageResponse(<div style={{...}}>{post.title}</div>)
}

ImageResponse از CSS properties معمولی مثل flexbox، absolute positioning، custom fonts، text wrapping، centering و nested images پشتیبانی می‌کند.

فقط flexbox و subsetی از CSS properties پشتیبانی می‌شوند. Advanced layouts مثل grid کار نخواهد کرد.