klz-cables.com/app/[locale]/api/og/product/route.tsx

import { ImageResponse } from 'next/og';
import { getProductBySlug } from '@/lib/mdx';
import { getTranslations } from 'next-intl/server';
import { OGImageTemplate } from '@/components/OGImageTemplate';
import { NextRequest } from 'next/server';
import { getOgFonts, OG_IMAGE_SIZE } from '@/lib/og-helper';

import { SITE_URL } from '@/lib/schema';

export const runtime = 'nodejs';

export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ locale: string }> },
) {
  const { searchParams } = new URL(request.url);
  const slug = searchParams.get('slug');
  const { locale } = await params;

  if (!slug) {
    return new Response('Missing slug', { status: 400 });
  }

  const fonts = await getOgFonts();
  const t = await getTranslations({ locale, namespace: 'Products' });

  // Check if it's a category page
  const categories = [
    'low-voltage-cables',
    'medium-voltage-cables',
    'high-voltage-cables',
    'solar-cables',
  ];
  if (categories.includes(slug)) {
    const categoryKey = slug
      .replace(/-cables$/, '')
      .replace(/-([a-z])/g, (g) => g[1].toUpperCase());
    const categoryTitle = t.has(`categories.${categoryKey}.title`)
      ? t(`categories.${categoryKey}.title`)
      : slug;
    const categoryDesc = t.has(`categories.${categoryKey}.description`)
      ? t(`categories.${categoryKey}.description`)
      : '';

    return new ImageResponse(
      <OGImageTemplate title={categoryTitle} description={categoryDesc} label="Product Category" />,
      {
        ...OG_IMAGE_SIZE,
        fonts,
      },
    );
  }

  const product = await getProductBySlug(slug, locale);

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

  const featuredImage = product.frontmatter.images?.[0]
    ? product.frontmatter.images[0].startsWith('http')
      ? product.frontmatter.images[0]
      : `${SITE_URL}${product.frontmatter.images[0]}`
    : undefined;

  return new ImageResponse(
    <OGImageTemplate
      title={product.frontmatter.title}
      description={product.frontmatter.description}
      label={product.frontmatter.categories?.[0] || 'Product'}
      image={featuredImage}
    />,
    {
      ...OG_IMAGE_SIZE,
      fonts,
    },
  );
}