۱. کاربرد opengraph-image و twitter-image
این فایل‌ها برای تولید تصاویر اشتراک‌گذاری در شبکه‌های اجتماعی مانند Twitter، WhatsApp و LinkedIn استفاده می‌شوند. هنگام اشتراک‌گذاری لینک، مرورگر از متادیتای <head> برای نمایش تصویر استفاده می‌کند.
۲. روش‌های تعریف تصویر
دو روش برای تعریف تصویر وجود دارد:
- استفاده از فایل تصویری (.jpg، .png، .gif)
- تولید تصویر با کد (.js، .ts، .tsx)
۳. استفاده از فایل تصویری
فایل را در segment مسیر قرار دهید:
opengraph-image.jpg→ برای Open Graphtwitter-image.png→ برای Twitteropengraph-image.alt.txt→ متن alt برای تصویرtwitter-image.alt.txt→ متن alt برای تصویر
محدودیت حجم:
- twitter-image: حداکثر ۵MB
- opengraph-image: حداکثر ۸MB
خروجی در <head>:
<meta property="og:image" content="..." />
<meta name="twitter:image" content="..." />
<meta property="og:image:alt" content="About Acme" />
<meta name="twitter:image:alt" content="About Acme" />۴. تولید تصویر با کد
از API ImageResponse در next/og استفاده کنید:
// app/about/opengraph-image.tsx
import { ImageResponse } from 'next/og'
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'
export const alt = 'About Acme'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default async function Image() {
const font = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf'))
return new ImageResponse(
<div style={{
fontSize: 128,
background: 'white',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
About Acme
</div>,
{
...size,
fonts: [{ name: 'Inter', data: font, style: 'normal', weight: 400 }],
}
)
}۵. پارامترهای ورودی و خروجی
تابع export شده می‌تواند پارامترهای داینامیک مسیر را دریافت کند:
export default async function Image({ params }) {
const { slug } = await params
}خروجی تابع باید یکی از انواع زیر باشد:
- Blob
- ArrayBuffer
- TypedArray
- ReadableStream
- Response
۶. تنظیمات متادیتا
می‌توانید متادیتای تصویر را با export کردن متغیرهای زیر تنظیم کنید:
export const alt = 'My images alt text'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'۷. مثال با دادهٔ خارجی
تصویر را بر اساس دادهٔ API تولید کنید:
// app/posts/[slug]/opengraph-image.tsx
export default async function Image({ params }) {
const { slug } = await params
const post = await fetch(`https://.../posts/${slug}`).then(res => res.json())
return new ImageResponse(
<div style={{
fontSize: 48,
background: 'white',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
{post.title}
</div>,
{ width: 1200, height: 630 }
)
}۸. استفاده از تصویر محلی
خواندن تصویر از فایل سیستم و تبدیل به base64:
const logoData = await readFile(join(process.cwd(), 'logo.png'), 'base64')
const logoSrc = `data:image/png;base64,${logoData}`جمع‌بندی
با استفاده از opengraph-image و twitter-image در Next.js می‌توانید تجربه اشتراک‌گذاری حرفه‌ای و قابل شخصی‌سازی برای صفحات خود بسازید. چه با فایل تصویری و چه با کد، این قابلیت‌ها به شما امکان می‌دهند کنترل کامل بر ظاهر لینک‌های اشتراکی در شبکه‌های اجتماعی داشته باشید.