Add searchParams to opengraph-image.tsx to allow for better OG image generation

[leonlarsson]

As the title says, I would love to be able to access searchParams inside opengraph-image.tsx files.
This would allow you to generate a OpenGraph images based on searchParams (and therefore reflect URL state in the image).

In a page.tsx, this works perfectly well:

// page.tsx
type Props = {
  searchParams: {
    search?: string;
    sort?: string;
  };
};

export default ({ searchParams }: Props) => { ... }

Doing the same in opengraph-image.tsx leads to searchParams being undefined.

As written in the documentation (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#props), it only has access to the params, which is not enough in my opinion.

Let's say my page relied on storing state in the URL for shareability.
I would need opengraph-image.tsx to be able to access input here: example.com/?input=hello

Thanks, and I hope this will be considered, or that I am outdated and it actually works somehow :)

[leonlarsson]

Quarterly bump :)

[leonlarsson]

One solution is to create a route (let's say /og) that generates and returns an image. Then we can simply link to the API in our metadata and it works, as we can pass searchParams to the route URL.

It would still be great UX to be able to do this directly in opengraph-image.tsx

[pjsny]

Bump- would be so useful

[carledwardfp]

bump

[hatchli]

Bump

[mc-cari]

Bump

[ponyjackal]

bump

[minajevs]

Time wasted on debugging this issue and looking for solution online:
1 hour

Feel free to increment it further :)

this kind of issue is the reason for nextjs fatigue. production-ready my ass

[fcFn]

Adding a workaround in the docs is a good start. Which is having a dedicated route for handling image requests.

[superayan]

Bump!

[hWonderOfTheWorld]

bump

[Cary0x]

Dynamic og generation is a great idea. +1

[peetzweg]

Not a nextjs expert but while trying to todo this, the following guide with example was the only thing which was working for me as expected with the most recent nextjs 15.

https://vercel.com/guides/dynamic-text-as-image

[hiroyukinuri]

Bump