Getting pathname in opengraph-image.tsx
Unanswered
Snowshoe posted this in #help-forum
SnowshoeOP
Hey everyone, my question is around OG image generation for blog posts.
My structure is:
- /app
- /blog
- /post-1
- page.mdx
- page.tsx
- opengraph-image.tsx
I'd like to be able to generate the images from the /blog/opengraph-image.tsx file by looking at the slug and looking up the blog post internally, but when accessing site.com/blog/post-1 it's given no parameters, and I was unable to use headers() and other hooks to get info about the request that may let me retrieve the slug.
Is there an easy way I could do this other than pasting the opengraphy-image.tsx file into every blog post directory, or turning my blog into a big catch all route?
Maybe some kind of export from the mdx file for the generateMetadata that calls a function or something? Alternative is setting the OG image path to an API url with the slug attached as a search param and caching the request for future visitors...
Cheers!
My structure is:
- /app
- /blog
- /post-1
- page.mdx
- page.tsx
- opengraph-image.tsx
I'd like to be able to generate the images from the /blog/opengraph-image.tsx file by looking at the slug and looking up the blog post internally, but when accessing site.com/blog/post-1 it's given no parameters, and I was unable to use headers() and other hooks to get info about the request that may let me retrieve the slug.
Is there an easy way I could do this other than pasting the opengraphy-image.tsx file into every blog post directory, or turning my blog into a big catch all route?
Maybe some kind of export from the mdx file for the generateMetadata that calls a function or something? Alternative is setting the OG image path to an API url with the slug attached as a search param and caching the request for future visitors...
Cheers!
3 Replies
You can use this example from the docs to generate multiple Open Graph images for a dynamic route.
https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata#using-external-data
https://nextjs.org/docs/app/api-reference/functions/generate-image-metadata#using-external-data
SnowshoeOP
This solution doesnt seem like it would work with the above constraints.
When loading
When loading
/app/blog/test-post/page.tsx nextjs will ignore /app/blog/[slug]/opengraph-image.tsx and would require a refactorUnless I'm misunderstanding something, it looks like the only options in Next to do this is:
- Refactor to use the
- Use the "API trick" where you set the OG image URL to a next api route that returns the ImageResponse
- Copy the opengraph-image.tsx file into every folder with a blog post
Would appreciate peoples opinions, I'd be more likely to go with the "API trick" option than any other atm, but it feels like a minor oversight in Next being unable to access the path/headers from the opengraph-image file. Might submit an issue for discussion.
- Refactor to use the
/app/blog/[slug]/page.tsx catch all then lookup the appropriate MDX file in a content folder somewhere- Use the "API trick" where you set the OG image URL to a next api route that returns the ImageResponse
- Copy the opengraph-image.tsx file into every folder with a blog post
Would appreciate peoples opinions, I'd be more likely to go with the "API trick" option than any other atm, but it feels like a minor oversight in Next being unable to access the path/headers from the opengraph-image file. Might submit an issue for discussion.