Dynamic OG images with Next.js

 1import { ImageResponse } from "next/og";
 2
 3export const runtime = "edge"; // a runtime to generate your images, Edge is the lightweight version of Node, exactly what we need to execute this thing fast.
 4// Node runtime is not supported for OG images anyway https://vercel.com/docs/functions/og-image-generation
 5// You can read more on runtimes in Next.js docs: https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
 6
 7export const size = {
 8  width: 1200, // standard sizes for the OG image
 9  height: 630, // do not recommend to change
10};
11
12export const contentType = "image/png"; // necessary to add to preserve the content type, even if it is not used in the code below
13
14export default async function Image({ params }: { params: { slug: string } }) {
15  return new ImageResponse(
16    (
17      /* Just your usual (almost) JSX layout. Imagine you are styling a component! */
18      <div
19        style={{
20          display: "flex",
21          flexDirection: "column",
22          backgroundColor: "#fac17a",
23          padding: "20px",
24          height: "100%",
25          width: "100%",
26        }}
27      >
28        <p
29          style={{
30            fontSize: 100,
31          }}
32        >
33          {params.slug}
34        </p>
35        <p
36          style={{
37            fontSize: 50,
38          }}
39        >
40          by lazy ocean
41        </p>
42      </div>
43    ),
44    {
45      ...size,
46    }
47  );
48}

 1export default async function Image({ params }: { params: { slug: string } }) {
 2  /* Loading font from a /public folder.
 3  NOTE: It does not have to be /public - you can keep a font for it in the same folder if you want. */
 4  const fontData = await fetch(
 5    new URL(
 6      "../../../../public/san-de-more/SandeMore-Regular.otf",
 7      import.meta.url
 8    )
 9  ).then((res) => res.arrayBuffer());
10
11  return new ImageResponse(
12    (
13      <div
14        style={{
15          backgroundColor: "#fbf4ec",
16          width: "100%",
17          height: "100%",
18          display: "flex",
19          alignItems: "center",
20          justifyContent: "center",
21          flexDirection: "column",
22          padding: "40px",
23          textAlign: "center",
24          border: "10px dashed black",
25        }}
26      >
27        <p
28          style={{
29            fontSize: 100,
30          }}
31        >
32          {params.slug}
33        </p>
34        <p
35          style={{
36            fontSize: 50,
37          }}
38        >
39          by lazy ocean
40        </p>
41      </div>
42    ),
43    {
44      ...size,
45      /* adding your font: */
46      fonts: [
47        {
48          name: "font",
49          data: fontData,
50          style: "normal",
51          weight: 400,
52        },
53      ],
54    }
55  );
56}

 1// In your OG Image function:
 2// Some API that returns { title: '<post title>' }
 3const post = await fetch(`http://{api}/posts/${params.slug}`).then((res) =>
 4  res.json()
 5);
 6
 7// To use in your JSX markup as:
 8<p
 9  style={{
10    fontSize: 100,
11  }}
12>
13  {post.title}
14</p>

 1// In my OG Image function:
 2const post = getPostsName(params.slug);
 3
 4// to use as
 5<p
 6  style={{
 7    fontSize: 100,
 8  }}
 9>
10  {post.title}
11</p>

1const postsMap: { [key: string]: { title: string; images: string } } = {
2  "dynamic-og-image": {
3    title: "Dynamic OG image with Next.js",
4    images: "stickers/email.png,stickers/css.png,stickers/webdesign.png",
5  },
6};
7
8export const getOGMeta = (slug: string) => postsMap[slug];

1const postsMap: { [key: string]: { title: string; images: string } } = {
2  "dynamic-og-image": {
3    title: "Dynamic OG image with Next.js",
4    images: "stickers/email.png,stickers/css.png,stickers/webdesign.png",
5  },
6};

 1// ...rest of the opengraph-image.tsx
 2<div style={{ display: "flex", gap: "20px", marginBottom: "20px" }}>
 3  {post.images?.split(",").map((img: string) => (
 4    <img
 5      style={{
 6        width: "100px",
 7      }}
 8      key={img}
 9      src={`${
10        process.env.NODE_ENV === "production"  // to build correct urls to images in /public
11          ? "https://lazy-ocean.vercel.app/"
12          : "http://localhost:3000/"
13        }${img}`}
14      alt=""
15      role="presentation"
16    />
17  ))}
18</div>
19// ...rest of the opengraph-image.tsx

 1import { ImageResponse } from "next/og";
 2import { getOGMeta } from "@/api/getOGmeta";
 3
 4export const runtime = "edge";
 5
 6export const size = {
 7  width: 1200,
 8  height: 630,
 9};
10
11export const contentType = "image/png";
12
13export default async function Image({ params }: { params: { slug: string } }) {
14  const fontData = await fetch(
15    new URL(
16      "../../../../public/san-de-more/SandeMore-Regular.otf",
17      import.meta.url
18    )
19  ).then((res) => res.arrayBuffer());
20
21  const post = getOGMeta(params.slug);
22
23  return new ImageResponse(
24    (
25      <div
26        style={{
27          backgroundColor: "#fbf4ec",
28          width: "100%",
29          height: "100%",
30          display: "flex",
31          alignItems: "center",
32          justifyContent: "center",
33          flexDirection: "column",
34          padding: "40px",
35          textAlign: "center",
36          border: "10px dashed black",
37        }}
38      >
39        <div style={{ display: "flex", gap: "20px", marginBottom: "20px" }}>
40          {post.images?.split(",").map((img: string) => (
41            <img
42              style={{
43                width: "100px",
44              }}
45              key={img}
46              src={`${
47                process.env.NODE_EN === "production"
48                  ? "https://lazy-ocean.vercel.app/"
49                  : "http://localhost:3000/"
50              }${img}`}
51              alt=""
52              role="presentation"
53            />
54          ))}
55        </div>
56        <p
57          style={{
58            fontSize: 100,
59          }}
60        >
61          {post.title}
62        </p>
63        <p
64          style={{
65            fontSize: 50,
66          }}
67        >
68          by Vladlena Panchenko
69        </p>
70      </div>
71    ),
72    {
73      ...size,
74      fonts: [
75        {
76          name: "font",
77          data: fontData,
78          style: "normal",
79          weight: 400,
80        },
81      ],
82    }
83  );
84}