mintel.me/apps/web/app/api/og/[[...slug]]/route.tsx

import { ImageResponse } from "next/og";
import { blogPosts } from "../../../../src/data/blogPosts";
import { blogThumbnails } from "../../../../src/data/blogThumbnails";
import { OGImageTemplate } from "../../../../src/components/OGImageTemplate";
import { getOgFonts, OG_IMAGE_SIZE } from "../../../../src/lib/og-helper";

export const runtime = "nodejs";

export async function GET(
  request: Request,
  { params }: { params: Promise<{ slug?: string[] }> },
) {
  const { slug: slugArray } = await params;
  const slug = slugArray?.[0] || "home";

  let title: string;
  let description: string;
  let label: string | undefined;
  let accentColor: string | undefined;
  let keyword: string | undefined;

  if (slug === "home") {
    title = "Marc Mintel";
    description =
      "Technical problem solver's blog - practical insights and learning notes";
    label = "Engineering";
  } else {
    const post = blogPosts.find((p) => p.slug === slug);
    const thumbnail = blogThumbnails[slug];
    title = post?.title || "Marc Mintel";
    description =
      post?.description ||
      "Technical problem solver's blog - practical insights and learning notes";
    label = post ? "Blog Post" : "Engineering";
    accentColor = thumbnail?.accent;
    keyword = thumbnail?.keyword;
  }

  const fonts = await getOgFonts();

  return new ImageResponse(
    <OGImageTemplate
      title={title}
      description={description}
      label={label}
      accentColor={accentColor}
      keyword={keyword}
    />,
    {
      ...OG_IMAGE_SIZE,
      fonts: fonts as any,
    },
  );
}