OpenGraph images are not statically generated for dynamic routes

[Cretezy]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 ZEN SMP PREEMPT_DYNAMIC Sun, 04 Jun 2023 11:52:10 +0000
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.10
      pnpm: 8.6.1
    Relevant packages:
      next: 13.4.5-canary.12
      eslint-config-next: 13.4.5
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Metadata (metadata, generateMetadata, next/head, head.js), Static HTML Export (output: "export")

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/reverent-feather-2sycr6

To Reproduce

• Set output: "export" in next.config.js
• Create dynamic path (a path with param, e.g. app/[id]/page.tsx) which has generateStaticParams
• Create opengraph-image.tsx for that path
• Don't set runtime (which defaults to 'auto'/'nodejs')
• Build Next.js (npm run build)

Describe the Bug

The opengraph-image is not generated for dynamic paths when statically rendering.

In the output, it's marked as λ (Server) server-side renders at runtime for the dynamic paths (e.g. /[id]/opengraph-image), without listing each generated path (which /[id] would have, e.g. /1, /2,).

I can confirm it generates a .html for each path in out, but no opengraph-image is preset.

(It does work if it has no parameter in the path)

Example build output:

Expected Behavior

A opengraph-image would be generated for each path returned by generateStaticParams, same as the page.tsx file would.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Statically rendered

_NEXT-1458

[joeyiny]

Having this issue as well.

[altano]

@huozhi it looks like you fixed this for server rendered dynamic routes in #48704. Any chance you could take a look if the fix is just as easy for output: "export" dynamic routes?

[chakkun1121]

You forgot the generateStaticParams function in opengraph-image.tsx. But when I add generateStaticParams function like below, an error has occurred like below.

// opengraph-image.tsx
...
+ export function generateStaticParams() {
+   return [{ id: "1" }, { id: "2" }];
+ }

error

Error: Page "/[id]/opengraph-image" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
    at /project/sandbox/node_modules/next/dist/build/index.js:909:59
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (/project/sandbox/node_modules/next/dist/trace/trace.js:105:20)
    at async Promise.all (index 6)
    at async /project/sandbox/node_modules/next/dist/build/index.js:802:17
    at async Span.traceAsyncFn (/project/sandbox/node_modules/next/dist/trace/trace.js:105:20)
    at async /project/sandbox/node_modules/next/dist/build/index.js:741:124
    at async Span.traceAsyncFn (/project/sandbox/node_modules/next/dist/trace/trace.js:105:20)
    at async build (/project/sandbox/node_modules/next/dist/build/index.js:184:29)
    at async main (/project/sandbox/node_modules/next/dist/bin/next:156:5)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

(I updated all the libraries.)
(I'm Japanese, so please forgive me if my English is strange.)

[altano]

@chakkun1121 yes this is broken. There is no known workaround.

You can’t use export and opengraph images in dynamic routes. It won’t work.

[Cretezy]

I'm getting the same behavior as @chakkun1121 in Next 13.5 now too.

[beeirl]

Opengraph Image generation doesn't seem to work with output: "export" being set in next.config.js. Getting a 404 error when trying to access the og image. Using Next 14.0.2. Any ideas for potential workarounds? cc @huozhi

[loganzartman]

In dev mode with output: export, I can't load the opengraph-images even for un-parameterized routes. When I try to visit the generated OG image URL, I get:

Error: Page "/opengraph-image/[[...__metadata_id__]]/route" is missing exported function "generateStaticParams()", which is required with "output: export" config.

Maybe the problem is that Next.js is generating this route /opengraph-image/[[...__metadata_id__]]/route, which obviously won't work with output: export unless it has generateStaticParams(). If there were some way to remove the randomized ID param for the opengraph-image and have this be a non-parameterized route, maybe that would work?

Kind of odd that the images are generated in the build output (for non-parameterized routes), and they work in dev mode if I remove output: export.

[altano]

@loganzartman yes I believe opengraph images ALSO don't work with catch-all routes (whether output:exporting or not). Someone else reported that in #57403 and #57349.

Opengraph images are pretty broken right now. There are no known workarounds for these issues.

[steventhanna]

I was able to get something working by doing the following:

In my page.js file located: /app/[[...slug]]/page.js

import Logo from '../opengraph-image.png';

export function generateMetadata() {
    return {
        openGraph: {
            images: [Logo.src]
        }
    }
}

I also was not able to get it working just by dropping the file in the tree, after much trial and error I had to manually add this piece.

[loganzartman]

I should point out that you can work around this for dynamic routes too. I created a route handler called [slug]/og.png/route.ts and defined both generateStaticParams and a GET handler that generates an image:

// [slug]/og.png/route.ts

export async function generateStaticParams() {
  // your logic here; this is copied directly from my dynamic route `[slug]/page.tsx`
  return getAllPosts().map(({data: {slug}}) => ({slug}));
}

export async function GET(req: Request, {params}: {params: {slug: string}}) {
  return new ImageResponse(...);
}

example

In output: export mode, this generates image files in the output. Then you can manually link these images as OpenGraph metadata using generateMetadata() in [slug]/page.tsx:

// [slug]/page.tsx

export async function generateStaticParams() {
  // again, duplicated in `[slug]/og.png/route.ts`
  return getAllPosts().map(({data: {slug}}) => ({slug}));
}

export function generateMetadata({params}: Props): Metadata {
  const post = getPostBySlug(params.slug);
  return {
    openGraph: {
      images: `/blog/${params.slug}/og.png`,
    },
  };
}

example

[rusakovic]

@loganzartman thank you for your solution. Did you work with no output: export, but dynamic? To rebuild OG images?

[altano]

@loganzartman neat idea. that worked perfectly for my site: I was able to switch to output: export and my OG images load instantly now.

It's a shame the built-in OG support is busted but this hack will do. Thanks!

[suyalcinkaya]

@loganzartman Thanks for the solution ❤️