Open Graph Images

When a link is shared on WhatsApp, LinkedIn or X, the preview image comes from og:image. Put an opengraph-image.tsx in a route folder to generate it with JSX:

app/products/[id]/opengraph-image.tsx

import { ImageResponse } from 'next/og';
import { getProduct } from '@/lib/products';

export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function Image({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await getProduct(Number(id));

  return new ImageResponse(
    (
      <div style={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', padding: 64, background: '#1e3a8a', color: 'white' }}>
        <div style={{ fontSize: 36 }}>ShopEase</div>
        <div style={{ fontSize: 72, fontWeight: 700, marginTop: 40 }}>{product?.name}</div>
        <div style={{ fontSize: 56, marginTop: 24 }}>₹{product?.price}</div>
      </div>
    ),
    size,
  );
}

Or drop a file: app/opengraph-image.png is used for the whole site, app/products/opengraph-image.png for that section. Next.js adds the meta tags automatically.

curl -s localhost:3000/products/42 | grep og:image

<meta property="og:image" content="https://shopease.in/products/42/opengraph-image?a1b2c3"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>