Next.js Discord

Discord Forum

How to access opengraph-image.tsx image in dev mode?

Answered
Chipping Sparrow posted this in #help-forum
Open in Discord
Chipping SparrowOP
Every time I refresh the page the url of og image is different in dev mode. How can I access image with one url for development iterations?
Answered by Chipping Sparrow
yeah, for each slug I have different og image, and I was struglling to find out how I can see this image, initially I though I have to reference like this:
http://localhost:3000/how-to/derivative-1-x/preview/opengraph-image?d53f80fa5b1e17a0


and I thought d53f80fa5b1e17a0 was essential, but it turned out I can just remove it.....

http://localhost:3000/how-to/derivative-1-x/preview/opengraph-image
View full answer

17 Replies

Jesse
wdym access opengraph-image, you'll able to create by just having an opengraph-image.tsx it should work
Chipping SparrowOP
It is working, but I need to iterate on it, to create the version I like
How can I access so that url of this image is not different on every page reload
http://localhost:3000/how-to/derivative-1-x/preview/opengraph-image?
d53f80fa5b1e17a0
Jesse
it won't be, I'm confused what you want
Chipping SparrowOP
d53f80fa5b1e17a0 changing all the time on page reload
Jesse
you only need opengraph when link is referenced externaly
you shouldn't reference it in your project you should just have a regular image for that
Chipping SparrowOP
I am generating image 

// import { Montserrat } from 'next/font/google';
import { ImageResponse } from 'next/og';

// Route segment config
export const runtime = 'edge';

// Image metadata
export const alt = 'How to';
export const size = {
  width: 1200,
  height: 630,
};

export const contentType = 'image/png';
// If loading a variable font, you don't need to specify the font weight

// Image generation
export default async function Image() {
  const montserratData = await fetch(
    new URL('Montserrat-SemiBold.ttf', import.meta.url),
  ).then((res) => res.arrayBuffer());

  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div tw="flex flex-col items-center w-full h-full bg-white">
        <div tw="text-xs font-bold">Text</div>
        <div tw="text-xs font-semibold">Text</div>
        <div tw="text-xs font-medium">Text</div>
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported opengraph-image
      // size config to also set the ImageResponse's width and height.
      ...size,
      emoji: 'twemoji',
      fonts: [
        {
          name: 'Montserrat',
          data: montserratData,
        },
      ],
    },
  );
}
since my images are different for how-to/[slug] depending on the post
what I want to achieve is to have some link I can access so that I can see how this image looks like
okay, nvm
http://localhost:3000/how-to/derivative-1-x/preview/opengraph-image
seems to have done the trick
Jesse
ahh I see
and you want to render the generated slug on the page
Chipping SparrowOP
yeah, for each slug I have different og image, and I was struglling to find out how I can see this image, initially I though I have to reference like this:
http://localhost:3000/how-to/derivative-1-x/preview/opengraph-image?d53f80fa5b1e17a0


and I thought d53f80fa5b1e17a0 was essential, but it turned out I can just remove it.....

http://localhost:3000/how-to/derivative-1-x/preview/opengraph-image
Answer
Chipping SparrowOP
thank u for finding time to answer me!