Catch all routes

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

@@ -11,9 +11,25 @@ export const revalidate = 43200; // 12 hours in seconds
 export async function generateMetadata({
   params
 }: {
-  params: { locale: string; slug: string };
+  params: { locale: string; slug: string[] };
 }): Promise<Metadata> {
-  const page = await clientFetch(pageQuery, params);
+  let queryParams = {
+    locale: params.locale,
+    slug: ''
+  };
+
+  if (params.slug.length > 1) {
+    queryParams = {
+      locale: params.locale,
+      slug: `${params.slug.join('/')}`
+    };
+  } else {
+    queryParams = {
+      locale: params.locale,
+      slug: `${params.slug}`
+    };
+  }
+  const page = await clientFetch(pageQuery, queryParams);
 
   if (!page) return notFound();
 
@@ -31,12 +47,29 @@ export async function generateMetadata({
 interface PageParams {
   params: {
     locale: string;
-    slug: string;
+    slug: string[];
   };
 }
 
 export default async function Page({ params }: PageParams) {
-  const page = await clientFetch(pageQuery, params);
+  let queryParams = {
+    locale: params.locale,
+    slug: ''
+  };
+
+  if (params.slug.length > 1) {
+    queryParams = {
+      locale: params.locale,
+      slug: `${params.slug.join('/')}`
+    };
+  } else {
+    queryParams = {
+      locale: params.locale,
+      slug: `${params.slug}`
+    };
+  }
+
+  const page = await clientFetch(pageQuery, queryParams);
 
   if (!page) return notFound();
 

app/[locale]/layout.tsx

@@ -7,27 +7,22 @@ import { ReactNode } from 'react';
 import { supportedLanguages } from '../../i18n-config';
 import './globals.css';
 
-const SITE_NAME = 'KM Storefront';
-const SITE_DESCRIPTION = 'Webb och digitalbyrå från Göteborg';
-const TWITTER_CREATOR = '@kodamera.se';
-const TWITTER_SITE = 'https://kodamera.se';
-
 export const metadata = {
   title: {
-    default: SITE_NAME,
-    template: `%s | ${SITE_NAME}`
+    default: process.env.SITE_NAME,
+    template: `%s | ${process.env.SITE_NAME}`
   },
-  description: SITE_DESCRIPTION,
+  description: process.env.SITE_DESCRIPTION,
   robots: {
     follow: true,
     index: true
   },
-  ...(TWITTER_CREATOR &&
-    TWITTER_SITE && {
+  ...(process.env.TWITTER_CREATOR &&
+    process.env.TWITTER_SITE && {
       twitter: {
         card: 'summary_large_image',
-        creator: TWITTER_CREATOR,
-        site: TWITTER_SITE
+        creator: process.env.TWITTER_CREATOR,
+        site: process.env.TWITTER_SITE
       }
     })
 };

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

@@ -55,6 +55,8 @@ export async function generateMetadata({
 export default async function ProductPage({ params }: ProductPageParams) {
   const product = await clientFetch(productQuery, params);
 
+  console.log(params);
+
   if (!product) return notFound();
 
   const productJsonLd = {