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

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

export const runtime = 'nodejs';

export default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string[] } }) {
  const productSlug = slug[slug.length - 1];
  const t = await getTranslations('Products');

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

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

  const featuredImage = product.frontmatter.images?.[0]
    ? (product.frontmatter.images[0].startsWith('http')
        ? product.frontmatter.images[0]
        : `https://klz-cables.com${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,
    }
  );
}