Dynamic OpenGraph Image Generation with @vercel/og

1// app/blog/[slug]/opengraph-image.tsx
2import { ImageResponse } from 'next/og';
3
4export const runtime = 'edge'; // Edge runtime for fast rendering
5export const alt = 'Article Social Share Card';
6export const size = { width: 1200, height: 630 };
7export const contentType = 'image/png';
8
9export default async function Image({
10  params,
11}: {
12  params: Promise<{ slug: string }>;
13}) {
14  const { slug } = await params;
15  const post = await fetch(`https://api.cms.com/posts/${slug}`).then(res => res.json());
16
17  return new ImageResponse(
18    (
19      <div
20        style={{
21          background: 'linear-gradient(to bottom right, #000000, #1a1a1a)',
22          width: '100%',
23          height: '100%',
24          display: 'flex',
25          flexDirection: 'column',
26          justifyContent: 'space-between',
27          padding: '80px',
28          color: 'white',
29        }}
30      >
31        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
32          <div
33            style={{
34              width: '40px',
35              height: '40px',
36              borderRadius: '50%',
37              backgroundColor: '#3b82f6',
38            }}
39          />
40          <span style={{ fontSize: '28px', fontWeight: 'bold' }}>FAANGPrep Technical Blog</span>
41        </div>
42
43        <h1
44          style={{
45            fontSize: '64px',
46            fontWeight: 'bold',
47            lineHeight: 1.2,
48          }}
49        >
50          {post.title}
51        </h1>
52
53        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '24px', color: '#9ca3af' }}>
54          <span>By {post.authorName}</span>
55          <span>faangprep.com</span>
56        </div>
57      </div>
58    ),
59    {
60      ...size,
61    }
62  );
63}