Using emoji in 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() {
6
  return new ImageResponse(
7
    (
8
      <div
9
        style={{
10
          fontSize: 100,
11
          color: 'black',
12
          background: 'white',
13
          width: '100%',
14
          height: '100%',
15
          padding: '50px 200px',
16
          textAlign: 'center',
17
          justifyContent: 'center',
18
          alignItems: 'center',
19
        }}
20
      >
21
        👋, 🌎
22
      </div>
23
    ),
24
    {
25
      width: 1200,
26
      height: 630,
27
      // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent' and 'fluentFlat'
28
      // Default to 'twemoji'
29
      emoji: 'twemoji',
30
    },
31
  );
32
}

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

5
export const runtime = 'edge';
6

7
export async function GET() {
8
  return new ImageResponse(
9
    (
10
      <div
11
        style={{
12
          fontSize: 100,
13
          color: 'black',
14
          background: 'white',
15
          width: '100%',
16
          height: '100%',
17
          padding: '50px 200px',
18
          textAlign: 'center',
19
          justifyContent: 'center',
20
          alignItems: 'center',
21
        }}
22
      >
23
        👋, 🌎
24
      </div>
25
    ),
26
    {
27
      width: 1200,
28
      height: 630,
29
      // Supported options: 'twemoji', 'blobmoji', 'noto', 'openmoji', 'fluent' and 'fluentFlat'
30
      // Default to 'twemoji'
31
      emoji: 'twemoji',
32
    },
33
  );
34
}

1
pnpm dev