slug i18n

2026-01-20 23:43:01 +01:00
parent f62485a67d
commit abf283c9ab
9 changed files with 267 additions and 42 deletions
--- a/app/[locale]/products/[...slug]/page.tsx
+++ b/app/[locale]/products/[...slug]/page.tsx
@@ -6,6 +6,7 @@ import RelatedProducts from '@/components/RelatedProducts';
 import { Badge, Container, Section } from '@/components/ui';
 import { getDatasheetPath } from '@/lib/datasheets';
 import { getAllProducts, getProductBySlug } from '@/lib/mdx';
+import { mapFileSlugToTranslated } from '@/lib/slugs';
 import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
 import { MDXRemote } from 'next-mdx-remote/rsc';
@@ -38,9 +39,9 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
      alternates: {
        canonical: `/${locale}/products/${productSlug}`,
        languages: {
-          'de': `/de/products/${productSlug}`,
-          'en': `/en/products/${productSlug}`,
-          'x-default': `/en/products/${productSlug}`,
+          'de': `/de/products/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+          'en': `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+          'x-default': `/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
        },
      },
      openGraph: {
@@ -65,9 +66,9 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
    alternates: {
      canonical: `/${locale}/products/${slug.join('/')}`,
      languages: {
-        'de': `/de/products/${slug.join('/')}`,
-        'en': `/en/products/${slug.join('/')}`,
-        'x-default': `/en/products/${slug.join('/')}`,
+        'de': `/de/products/${await mapFileSlugToTranslated(slug[0], 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+        'en': `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+        'x-default': `/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
      },
    },
    openGraph: {
@@ -133,13 +134,21 @@ export default async function ProductPage({ params }: ProductPageProps) {
    const categoryTitle = t(`categories.${categoryKey}.title`);
    
    // Filter products for this category
-    const filteredProducts = allProducts.filter(p => 
-      p.frontmatter.categories.some(cat => 
-        cat.toLowerCase().replace(/\s+/g, '-') === productSlug || 
+    const filteredProducts = allProducts.filter(p =>
+      p.frontmatter.categories.some(cat =>
+        cat.toLowerCase().replace(/\s+/g, '-') === productSlug ||
        cat === categoryTitle
      )
    );

+    // Get translated product slugs
+    const productsWithTranslatedSlugs = await Promise.all(
+      filteredProducts.map(async (p) => ({
+        ...p,
+        translatedSlug: await mapFileSlugToTranslated(p.slug, locale)
+      }))
+    );
+
    return (
      <div className="flex flex-col min-h-screen bg-white">
        <section className="relative min-h-[50vh] flex items-center pt-32 pb-20 overflow-hidden bg-primary-dark">
@@ -161,10 +170,10 @@ export default async function ProductPage({ params }: ProductPageProps) {
        <Section className="bg-neutral-light relative">
          <Container>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {filteredProducts.map((product) => (
-                <Link 
-                  key={product.slug} 
-                  href={`/${locale}/products/${productSlug}/${product.slug}`}
+              {productsWithTranslatedSlugs.map((product) => (
+                <Link
+                  key={product.slug}
+                  href={`/${locale}/products/${productSlug}/${product.translatedSlug}`}
                  className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"
                >
                  <div className="aspect-[4/3] relative bg-neutral-light/30 p-12 overflow-hidden">
--- a/app/[locale]/products/page.tsx
+++ b/app/[locale]/products/page.tsx
@@ -1,11 +1,11 @@
 import Reveal from '@/components/Reveal';
 import Scribble from '@/components/Scribble';
 import { Badge, Button, Card, Container, Section } from '@/components/ui';
-import { useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 import { Metadata } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';
+import { mapFileSlugToTranslated } from '@/lib/slugs';

 interface ProductsPageProps {
  params: {
@@ -39,37 +39,43 @@ export async function generateMetadata({ params: { locale } }: ProductsPageProps
  };
 }

-export default function ProductsPage({ params }: ProductsPageProps) {
-  const t = useTranslations('Products');
+export default async function ProductsPage({ params }: ProductsPageProps) {
+  const t = await getTranslations('Products');
+
+  // Get translated category slugs
+  const lowVoltageSlug = await mapFileSlugToTranslated('low-voltage-cables', params.locale);
+  const mediumVoltageSlug = await mapFileSlugToTranslated('medium-voltage-cables', params.locale);
+  const highVoltageSlug = await mapFileSlugToTranslated('high-voltage-cables', params.locale);
+  const solarSlug = await mapFileSlugToTranslated('solar-cables', params.locale);

  const categories = [
-    { 
-      title: t('categories.lowVoltage.title'), 
+    {
+      title: t('categories.lowVoltage.title'),
      desc: t('categories.lowVoltage.description'),
      img: '/uploads/2024/11/low-voltage-category.webp',
      icon: '/uploads/2024/11/Low-Voltage.svg',
-      href: `/${params.locale}/products/low-voltage-cables`
+      href: `/${params.locale}/products/${lowVoltageSlug}`
    },
-    { 
-      title: t('categories.mediumVoltage.title'), 
+    {
+      title: t('categories.mediumVoltage.title'),
      desc: t('categories.mediumVoltage.description'),
      img: '/uploads/2024/11/medium-voltage-category.webp',
      icon: '/uploads/2024/11/Medium-Voltage.svg',
-      href: `/${params.locale}/products/medium-voltage-cables`
+      href: `/${params.locale}/products/${mediumVoltageSlug}`
    },
-    { 
-      title: t('categories.highVoltage.title'), 
+    {
+      title: t('categories.highVoltage.title'),
      desc: t('categories.highVoltage.description'),
      img: '/uploads/2024/11/high-voltage-category.webp',
      icon: '/uploads/2024/11/High-Voltage.svg',
-      href: `/${params.locale}/products/high-voltage-cables`
+      href: `/${params.locale}/products/${highVoltageSlug}`
    },
-    { 
-      title: t('categories.solar.title'), 
+    {
+      title: t('categories.solar.title'),
      desc: t('categories.solar.description'),
      img: '/uploads/2024/11/solar-category.webp',
      icon: '/uploads/2024/11/Solar.svg',
-      href: `/${params.locale}/products/solar-cables`
+      href: `/${params.locale}/products/${solarSlug}`
    }
  ];

@@ -124,7 +130,7 @@ export default function ProductsPage({ params }: ProductsPageProps) {
                      <div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
                      
                      <div className="absolute top-3 right-3 md:top-8 md:right-8 w-10 h-10 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-xl md:rounded-[24px] flex items-center justify-center border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:bg-white/20">
-                        <img src={category.icon} alt="" className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" />
+                        <Image src={category.icon} alt="" width={24} height={24} className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" />
                      </div>

                      <div className="absolute bottom-4 left-4 md:bottom-10 md:left-10 right-4 md:right-10">