fix(routing): resolve 404 on German product pages via rewrites and localized links

app/[locale]/products/[...slug]/page.tsx

@@ -53,17 +53,17 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
       title: categoryTitle,
       description: categoryDesc,
       alternates: {
-        canonical: `${SITE_URL}/${locale}/products/${productSlug}`,
+        canonical: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}/${productSlug}`,
         languages: {
-          de: `${SITE_URL}/de/products/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+          de: `${SITE_URL}/de/${await mapFileSlugToTranslated('products', 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
-          en: `${SITE_URL}/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+          en: `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
-          'x-default': `${SITE_URL}/en/products/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+          'x-default': `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
         },
       },
       openGraph: {
         title: `${categoryTitle} | KLZ Cables`,
         description: categoryDesc,
-        url: `${SITE_URL}/${locale}/products/${productSlug}`,
+        url: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}/${productSlug}`,
         images: getProductOGImageMetadata(fileSlug, categoryTitle, locale),
       },
       twitter: {
@@ -81,18 +81,18 @@ export async function generateMetadata({ params }: ProductPageProps): Promise<Me
     title: product.frontmatter.title,
     description: product.frontmatter.description,
     alternates: {
-      canonical: `${SITE_URL}/${locale}/products/${slug.join('/')}`,
+      canonical: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}/${slug.join('/')}`,
       languages: {
-        de: `${SITE_URL}/de/products/${await mapFileSlugToTranslated(slug[0], 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
+        de: `${SITE_URL}/de/${await mapFileSlugToTranslated('products', 'de')}/${await mapFileSlugToTranslated(slug[0], 'de')}/${await mapFileSlugToTranslated(productSlug, 'de')}`,
-        en: `${SITE_URL}/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+        en: `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
-        'x-default': `${SITE_URL}/en/products/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
+        'x-default': `${SITE_URL}/en/${await mapFileSlugToTranslated('products', 'en')}/${await mapFileSlugToTranslated(slug[0], 'en')}/${await mapFileSlugToTranslated(productSlug, 'en')}`,
       },
     },
     openGraph: {
       title: `${product.frontmatter.title} | KLZ Cables`,
       description: product.frontmatter.description,
       type: 'website',
-      url: `${SITE_URL}/${locale}/products/${slug.join('/')}`,
+      url: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}/${slug.join('/')}`,
       images: getProductOGImageMetadata(productSlug, product.frontmatter.title, locale),
     },
     twitter: {
@@ -236,7 +236,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
               {productsWithTranslatedSlugs.map((product) => (
                 <Link
                   key={product.slug}
-                  href={`/${locale}/products/${productSlug}/${product.translatedSlug}`}
+                  href={`/${locale}/${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"
                 >
                   <Card tag="article" className="premium-card-reset">
@@ -381,7 +381,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
               </Link>
               <span className="mx-4 opacity-20">/</span>
               <Link
-                href={`/${locale}/products/${categorySlug}`}
+                href={`/${locale}/${productSlug}`}
                 className="hover:text-accent transition-colors"
               >
                 {categoryTitle}
@@ -504,7 +504,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                       '@type': 'Offer',
                       availability: 'https://schema.org/InStock',
                       priceCurrency: 'EUR',
-                      url: `${SITE_URL}/${locale}/products/${slug.join('/')}`,
+                      url: `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}/${slug.join('/')}`,
                       itemCondition: 'https://schema.org/NewCondition',
                     },
                     additionalProperty: technicalItems.map((item: any) => ({
@@ -515,7 +515,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
                     category: product.frontmatter.categories.join(', '),
                     mainEntityOfPage: {
                       '@type': 'WebPage',
-                      '@id': `${SITE_URL}/${locale}/products/${slug.join('/')}`,
+                      '@id': `${SITE_URL}/${locale}/${await mapFileSlugToTranslated('products', locale)}/${slug.join('/')}`,
                     },
                   } as any
                 }

components/RelatedProducts.tsx

@@ -2,6 +2,7 @@ import { getAllProducts } from '@/lib/mdx';
 import { getTranslations } from 'next-intl/server';
 import Image from 'next/image';
 import { RelatedProductLink } from './RelatedProductLink';
+import { mapFileSlugToTranslated } from '@/lib/slugs';
 
 interface RelatedProductsProps {
   currentSlug: string;
@@ -16,6 +17,7 @@ export default async function RelatedProducts({
 }: RelatedProductsProps) {
   const products = await getAllProducts(locale);
   const t = await getTranslations('Products');
+  const productsSlug = await mapFileSlugToTranslated('products', locale);
 
   // Filter products: same category, not current product
   const related = products
@@ -61,7 +63,7 @@ export default async function RelatedProducts({
           return (
             <RelatedProductLink
               key={product.slug}
-              href={`/${locale}/products/${catSlug}/${product.slug}`}
+              href={`/${locale}/${productsSlug}/${catSlug}/${product.slug}`}
               productSlug={product.slug}
               productTitle={product.frontmatter.title}
               className="group block bg-white rounded-[32px] overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 border border-neutral-dark/5"

next.config.mjs

@@ -344,6 +344,14 @@ const nextConfig = {
     }
 
     return [
+      {
+        source: '/de/produkte',
+        destination: '/de/products',
+      },
+      {
+        source: '/de/produkte/:path*',
+        destination: '/de/products/:path*',
+      },
       {
         source: '/cms/:path*',
         destination: `${directusUrl}/:path*`,