klz-cables.com/app/[locale]/[slug]/opengraph-image.tsx

import { ImageResponse } from 'next/og';
import { getPageBySlug } from '@/lib/pages';
import { OGImageTemplate } from '@/components/OGImageTemplate';
import { getOgFonts, OG_IMAGE_SIZE, getOgAssets } from '@/lib/og-helper';

export const size = OG_IMAGE_SIZE;
export const contentType = 'image/png';
export const runtime = 'nodejs';

export default async function Image({
  params,
}: {
  params: Promise<{ locale: string; slug: string }>;
}) {
  const { locale, slug } = await params;
  const pageData = await getPageBySlug(slug, locale);

  if (!pageData) {
    return new Response('Page not found', { status: 404 });
  }

  const fonts = await getOgFonts();
  const { logo, bgImage } = getOgAssets();

  return new ImageResponse(
    <OGImageTemplate
      image={bgImage}
      logo={logo}
      title={pageData.frontmatter.title}
      description={pageData.frontmatter.excerpt}
      label="Information"
    />,
    {
      ...OG_IMAGE_SIZE,
      fonts,
    },
  );
}