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';

export const runtime = 'nodejs';

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

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

  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"
        />
      ),
      {
        width: 1200,
        height: 630,
      }
    );
  }

  const product = await getProductBySlug(slug, locale);

  if (!product) {
    return new ImageResponse(
      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: '#001a4d' }} />
    );
  }

  const { origin } = new URL(request.url);
  const featuredImage = product.frontmatter.images?.[0]
    ? (product.frontmatter.images[0].startsWith('http')
        ? product.frontmatter.images[0]
        : `${origin}${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}
      />
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}