Next.js Discord

Discord Forum

Is it possible to use `opengraph-image.tsx` with `output: "export"` ?

Unanswered
Tomistoma posted this in #help-forum
Open in Discord
TomistomaOP
Quick question.

I am getting something like this when I try:

Error: Page "/posts/[slug]/opengraph-image/[[...__metadata_id__]]/route" is missing param "/posts/what-is-a-file/opengraph-image" in "generateStaticParams()", which is required with "output: export" config.


import { allPosts, type Post } from "contentlayer/generated";
import { ImageResponse } from "next/og";
export const generateStaticParams = () =>
  allPosts.map((post) => ({ slug: post._raw.flattenedPath }));

export default function Image({
  params,
  id,
}: {
  params: { id: string };
  id: number;
}) {
  const text = "Hello World";

  return new ImageResponse(<div>{text}</div>);
}

8 Replies

so in this case metadata_id
cause u have [slug] but u are forgetting the other one
and also -> your image should accept both of those params with the correct type
as u see in the example, this is how your image component should accept the params
just like in any other dynamic route
@gin cause u have [slug] but u are forgetting the other one
TomistomaOP
thank you! I looked and there's currently an issue about OG images not working for static export: https://github.com/vercel/next.js/issues/51147

I've found out how to do it, with a route.ts file handler and this:

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

import { allPosts } from "contentlayer/generated";
import { ImageResponse } from "next/og";

import { OgImage, OgImageNotFound } from "./og-image";

export const generateStaticParams = () =>
  allPosts.map((post) => ({ slug: post._raw.flattenedPath }));

export function GET(req: Request, { params }: { params: { slug: string } }) {
  const post = allPosts.find(
    (mdxPost) => mdxPost._raw.flattenedPath === params.slug,
  );

  return new ImageResponse(
    post
      ? OgImage({ title: post.title, description: post.description })
      : OgImageNotFound(),
    {
      width: 1280,
      height: 675,
      status: post ? 200 : 404,
    },
  );
}