Next.js Discord

Discord Forum

Generating images with ImageResponse doesn't work

Answered
Silky ant posted this in #help-forum
Open in Discord
Silky antOP
app/opengraph-image.tsx and app/twitter-image.tsx
import { ImageResponse } from "next/og";

export const runtime = "edge";

export const alt = "About Acme";
export const size = {
  width: 1200,
  height: 630,
};

export const contentType = "image/png";

export default async function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          color: "black",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        About Acme
      </div>
    ),
    {
      ...size,
    }
  );
}


app/api/route.tsx
import { ImageResponse } from "next/og";

export const runtime = "edge";

export async function GET() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}


app/layout.tsx (inside metadata object)
// doesn't work with or without this
  // openGraph: {
  //   images: "/api",
  // },


build log
 âš  metadata.metadataBase is not set for resolving social open graph or twitter images, using "https://workout-tracker-jn7xgwkij-nicu420.vercel.app". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
Answered by Silky ant
Yes this was it

middleware.ts
export default authMiddleware({
  publicRoutes: ["/", "/opengraph-image", "/twitter-image"],
});
View full answer

20 Replies

Ray
try setting metadataBase in the layout
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  },
  openGraph: {
    images: '/og-image.png',
  },
}
Silky antOP
what am i supposed to write in openGraph: {images} ?
Ray
let try this first
export const metadata = {
  metadataBase: new URL('https://acme.com'),
  alternates: {
    canonical: '/',
    languages: {
      'en-US': '/en-US',
      'de-DE': '/de-DE',
    },
  }
}
Silky antOP
brought back opengraph-image.tsx and twitter-image.tsx in /app, still have the /app/api/route.tsx
added these to my /app/layout.tsx metadata
metadataBase: new URL("https://trainsync.vercel.app/"),
alternates: {
canonical: "/",
languages: {
"en-US": "/en-US",
"de-DE": "/de-DE",
},
},

still does not work
added these and deployed
openGraph: {
images: "/api",
},
twitter: {
images: "/api",
},

still doesnt work
Silky antOP
I have just checked the html in both production and localhost
without metadataBase, openGraph or twitter objects configured in metadata
without the api route
it seems like app/opengraph-image.tsx and app/twitter-image.tsx do work, i can even copy paste the content link and see it, but it doesnt get displayed when sharing a link of my app in prod
Silky antOP
nvm i need metadataBase in prod
the html seems right but image isnt displayed anywhere
Ray
maybe clerk block it?
i visit your link and clerk redirect me to login
Silky antOP
which link? home should be visible without auth
https://trainsync.vercel.app/
on discord even the title and description does not appear, is that intentional?
actually now that i think about it, that /opengraph... is another route than home, maybe thats why it doesn't work
but the name is dynamically generated, ill have to use some regex in clerk Middleware probably
Silky antOP
Yes this was it

middleware.ts
export default authMiddleware({
  publicRoutes: ["/", "/opengraph-image", "/twitter-image"],
});
Answer
Silky antOP
thank you Ray