Next.js Discord

Discord Forum

Dynamic OG images at build time only

Answered
maslomeister posted this in #help-forum
Open in Discord
Not sure if i named the title correctly, but i would like to use satori in a static blog, where each page is generated statically and so the OG images don't have to be dynamic, they can all be generated once at a build time and served as static assets, how would i do that?

My plan is:
1) add export const dynamic = "force-static"; to the server component page
2) in the page itself call async function to generate the image and put it in relevant folder bathed on pathname
3) in the meta:og_image use that pathname as string

Is this a valid way to solve this?
Answered by maslomeister
Here's finished version, works fine
View full answer

2 Replies

I've attached the code to the message, it works, but the code is meh

i call it in a page for which i want to generate the img
await generateOgImage({ path: metadata.openGraph?.url, text: metadata.openGraph?.title });
and i also mark the page to be static just in case
export const dynamic = "force-static";

i aslo add this line to the next conf
experimental: {
        serverComponentsExternalPackages: ["@resvg/resvg-js"],
    },


i strongly feel that someone might have already done this in a past properly, so if anyone knows where to find it, feel welcomed to leave a link
Here's finished version, works fine
Answer