Catch all routes

.env.example

@@ -19,5 +19,6 @@ VERCEL_GIT_PULL_REQUEST_ID=""
 TWITTER_CREATOR="@kodamera"
 TWITTER_SITE="https://kodamera.se"
 SITE_NAME="KM Storefront"
+SITE_DESCRIPTION="High-performance ecommerce store built with Next.js, Vercel, Sanity and Storm."
 SHOPIFY_STOREFRONT_ACCESS_TOKEN=
 SHOPIFY_STORE_DOMAIN=

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,
+    default: process.env.SITE_NAME,
-    template: `%s | ${SITE_NAME}`
+    template: `%s | ${process.env.SITE_NAME}`
   },
-  description: SITE_DESCRIPTION,
+  description: process.env.SITE_DESCRIPTION,
   robots: {
     follow: true,
     index: true
   },
-  ...(TWITTER_CREATOR &&
+  ...(process.env.TWITTER_CREATOR &&
-    TWITTER_SITE && {
+    process.env.TWITTER_SITE && {
       twitter: {
         card: 'summary_large_image',
-        creator: TWITTER_CREATOR,
+        creator: process.env.TWITTER_CREATOR,
-        site: TWITTER_SITE
+        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 = {

components/layout/footer/copyright.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+
+export default function CopyRight() {
+  const currentYear = new Date().getFullYear();
+  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
+  const t = useTranslations('ui');
+
+  return (
+    <p className="text-xs text-white">
+      &copy; {copyrightDate} Kodamera - {t('copyright')}
+    </p>
+  );
+}

components/layout/footer/footer.tsx

@@ -1,9 +1,8 @@
-'use client';
+import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
-
-// import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
-import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import CopyRight from './copyright';
+
 // interface FooterProps {
 //   localeData: {
 //     type: string;
@@ -13,11 +12,6 @@ import Link from 'next/link';
 // }
 
 const Footer = () => {
-  // const locale = useLocale();
-  const currentYear = new Date().getFullYear();
-  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
-  const t = useTranslations('ui');
-
   return (
     <footer className="border-t border-ui-border bg-app">
       <div className="mx-auto flex w-full flex-col">
@@ -25,12 +19,10 @@ const Footer = () => {
           <Link className="flex flex-initial items-center font-bold md:mr-24" href="/">
             <Logo />
           </Link>
-          {/* <LocaleSwitcher localeData={localeData} currentLocale={locale} /> */}
+          <LocaleSwitcher />
         </div>
         <div className="flex items-center justify-center border-t border-ui-border bg-black px-4 py-3 lg:px-8 2xl:px-16">
-          <p className="text-xs text-white">
+          <CopyRight />
-            &copy; {copyrightDate} Kodamera - {t('copyright')}
-          </p>
         </div>
       </div>
     </footer>

components/ui/card/card.tsx

@@ -14,8 +14,6 @@ interface CardProps {
   imageFormat?: 'square' | 'portrait' | 'landscape';
 }
 
-const placeholderImg = '/product-img-placeholder.svg';
-
 const Card: FC<CardProps> = ({ className, title, image, link, text, imageFormat = 'square' }) => {
   const rootClassName = cn('relative', className);
 
@@ -39,7 +37,7 @@ const Card: FC<CardProps> = ({ className, title, image, link, text, imageFormat
       } else if (type === 'category') {
         href = `/category/${link.internalLink.reference.slug.current}`;
       } else {
-        return `${link.internalLink.reference.slug.current}`;
+        href = `${link.internalLink.reference.slug.current}`;
       }
 
       return (

components/ui/locale-switcher/locale-switcher.tsx

@@ -1,43 +1,47 @@
+'use client';
+
 import LanguageIcon from 'components/icons/language';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger
 } from 'components/ui/dropdown/dropdown';
+import { useLocale } from 'next-intl';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 import { supportedLanguages } from '../../../i18n-config';
 
-interface LocaleSwitcherProps {
+// interface LocaleSwitcherProps {
-  currentLocale: string;
+// localeData: {
-  localeData: {
+//   type: string;
-    type: string;
+//   locale: string;
-    locale: string;
+//   translations: [];
-    translations: [];
+// };
-  };
+// }
-}
 
-export default function LocaleSwitcher({ currentLocale, localeData }: LocaleSwitcherProps) {
+export default function LocaleSwitcher() {
   const pathName = usePathname();
-  const translations = localeData.translations;
+  const currentLocale = useLocale();
+
+  // const translations = localeData.translations;
 
   const redirectedPathName = (locale: string) => {
-    if (!pathName || translations.length === 0) return '/';
+    if (!pathName) return '/';
 
-    if (translations.length > 0) {
+    // if (translations.length > 0) {
-      const translation = translations.find((obj) => {
+    //   const translation = translations.find((obj) => {
-        return obj['locale'] === locale;
+    //     return obj['locale'] === locale;
-      });
+    //   });
 
-      if (translation) {
+    //   if (translation) {
-        const url = `/${translation['locale']}${translation['slug']}`;
+    //     const url = `/${translation['locale']}${translation['slug']}`;
 
-        return url;
+    //     return url;
-      }
+    //   }
-    }
+    // }
 
-    return '/';
+    return `/${locale}`;
   };
 
   const [isOpen, setIsOpen] = useState(false);