diff --git a/app/[locale]/products/[...slug]/opengraph-image.tsx b/app/[locale]/api/og/product/route.tsx
similarity index 69%
rename from app/[locale]/products/[...slug]/opengraph-image.tsx
rename to app/[locale]/api/og/product/route.tsx
index 0cfb7e6d..0c0c720a 100644
--- a/app/[locale]/products/[...slug]/opengraph-image.tsx
+++ b/app/[locale]/api/og/product/route.tsx
@@ -2,18 +2,29 @@ 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 default async function Image({ params: { locale, slug } }: { params: { locale: string, slug: string[] } }) {
- const t = await getTranslations('Products');
- const productSlug = slug[slug.length - 1];
+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(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;
+ 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(
@@ -31,7 +42,7 @@ export default async function Image({ params: { locale, slug } }: { params: { lo
);
}
- const product = await getProductBySlug(productSlug, locale);
+ const product = await getProductBySlug(slug, locale);
if (!product) {
return new ImageResponse(
diff --git a/app/[locale]/blog/opengraph-image.tsx b/app/[locale]/blog/opengraph-image.tsx
new file mode 100644
index 00000000..84dc000e
--- /dev/null
+++ b/app/[locale]/blog/opengraph-image.tsx
@@ -0,0 +1,25 @@
+import { ImageResponse } from 'next/og';
+import { getTranslations } from 'next-intl/server';
+import { OGImageTemplate } from '@/components/OGImageTemplate';
+
+export const runtime = 'nodejs';
+
+export default async function Image({ params: { locale } }: { params: { locale: string } }) {
+ const t = await getTranslations({ locale, namespace: 'Blog.meta' });
+ const title = t('title');
+ const description = t('description');
+
+ return new ImageResponse(
+ (
+
+ ),
+ {
+ width: 1200,
+ height: 630,
+ }
+ );
+}
diff --git a/app/[locale]/products/[...slug]/page.tsx b/app/[locale]/products/[...slug]/page.tsx
index e843f373..7231553b 100644
--- a/app/[locale]/products/[...slug]/page.tsx
+++ b/app/[locale]/products/[...slug]/page.tsx
@@ -51,6 +51,14 @@ export async function generateMetadata({ params }: ProductPageProps): Promise