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