Using dynamic text as your OG Image

1
import { ImageResponse } from 'next/og';
2
// App router includes @vercel/og.
3
// No need to install it.
4

5
export async function GET(request: Request) {
6
  try {
7
    const { searchParams } = new URL(request.url);
8

9
    // ?title=<title>
10
    const hasTitle = searchParams.has('title');
11
    const title = hasTitle
12
      ? searchParams.get('title')?.slice(0, 100)
13
      : 'My default title';
14

15
    return new ImageResponse(
16
      (
17
        <div
18
          style={{
19
            backgroundColor: 'black',
20
            backgroundSize: '150px 150px',
21
            height: '100%',
22
            width: '100%',
23
            display: 'flex',
24
            textAlign: 'center',
25
            alignItems: 'center',
26
            justifyContent: 'center',
27
            flexDirection: 'column',
28
            flexWrap: 'nowrap',
29
          }}
30
        >
31
          <div
32
            style={{
33
              display: 'flex',
34
              alignItems: 'center',
35
              justifyContent: 'center',
36
              justifyItems: 'center',
37
            }}
38
          >
39
            <img
40
              alt="Vercel"
41
              height={200}
42
              src="data:image/svg+xml,%3Csvg width='116' height='100' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M57.5 0L115 100H0L57.5 0z' /%3E%3C/svg%3E"
43
              style={{ margin: '0 30px' }}
44
              width={232}
45
            />
46
          </div>
47
          <div
48
            style={{
49
              fontSize: 60,
50
              fontStyle: 'normal',
51
              letterSpacing: '-0.025em',
52
              color: 'white',
53
              marginTop: 30,
54
              padding: '0 120px',
55
              lineHeight: 1.4,
56
              whiteSpace: 'pre-wrap',
57
            }}
58
          >
59
            {title}
60
          </div>
61
        </div>
62
      ),
63
      {
64
        width: 1200,
65
        height: 630,
66
      },
67
    );
68
  } catch (e: any) {
69
    console.log(`${e.message}`);
70
    return new Response(`Failed to generate the image`, {
71
      status: 500,
72
    });
73
  }
74
}