Opengraph dynamic generation with localized prefixed routing

[seloElo]

Hi!

I'm trying to set a dynamic opengraph image generation using https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx.

My issue is that I use a localePrefix like this for my routing:

export const localePrefixes = {
  "en-gb": "/gb",
  "en-ie": "/ie",
  "fr-fr": "/fr",
  "en-us": "/us",
};

Which is used in my defineRouting as such:

localePrefix: {
  mode: "always",
  prefixes: localePrefixes,
},

http://localhost:3000/fr-fr/xxx/opengraph-image?0478f65c6f2e71cd

The property="og:image" content is set automatically to a URL with a locale of the sort which obviously does not work externally due to my matcher only supporting prefixes.

I feel like we can't control the path of the url being used by the ImageResponse object expected by next. Should I take care of redirecting urls with full locales to their prefix? Or is their something I'm not seeing here?

[amannn]

Hmm, interesting question. What kind of response do you get at /fr-fr/xxx/opengraph-image?0478f65c6f2e71cd? It's true that the middleware won't match this request, but maybe that's ok.

Are you using i18n functionality in the opengraph image generation? While the middleware won't automatically associate a locale with your request, you can for example call getTranslations({locale: …}), which will provide an explicit locale. Maybe this could work for you.

Alternatively, you could return an OG image from a custom Route Handler and include a link to that in your pages—this way you have full control over the URL.

[seloElo]

Hello, thanks for your answer!

If I try to access the default url set by next /fr-fr/xxx/opengraph-image?0478f65c6f2e71cd, I get a 404.

/fr/xxx/opengraph-image?0478f65c6f2e71cd works fine tho, with or without translation (with the explicit locale provided)
It's pretty much the same issue as the sitemap with specific prefixes, where I had to setup my own templating based on my routing configuration otherwise the default doc sitemap was giving incorrect full locale urls (/fr-fr/...).

I just don't know if it's something you can do with the default ..[anyfolder]/opengraph-image.ts/tsx/js/jsx feature, looks like you cant control the link path of the og:image meta content.

Or maybe it's just me that did not correctly implement my matcher and needs to update my middleware to redirect the prefixes the full locale "fr-fr" to the "fr".

  matcher: [
    "/",
    "/(gb|ie|us|fr)/:path*",
    // Enable redirects that add missing locales
    "/((?!_next|_vercel|.*\\..*).*)",
  ],

On the other end, if I use just an opengraph-image.png, link will be the same : /fr-fr/xxx/opengraph-image.png?e7ede5acfc409e97 but this time as it's accessing a file directly it works

I will try the custom router handler alternative.