Dynamic imports

app/[locale]/globals.css

@@ -153,11 +153,11 @@ body {
 }
 
 .glider-prev {
-  @apply !-top-10 !left-auto !right-12 text-high-contrast !transition-transform !duration-100 hover:scale-110 hover:!text-high-contrast lg:!-top-10 lg:!right-16 2xl:!-top-12 2xl:!right-[100px];
+  @apply !-top-10 !left-auto !right-12 text-high-contrast !transition-transform !duration-100 hover:scale-110 hover:!text-high-contrast lg:!-top-12 lg:!right-16 2xl:!right-[100px];
 }
 
 .glider-next {
-  @apply !-top-10 !right-4 text-high-contrast !transition-transform !duration-100 hover:scale-110 hover:!text-high-contrast lg:!-top-10 lg:!right-8 2xl:!-top-12 2xl:!right-16;
+  @apply !-top-10 !right-4 text-high-contrast !transition-transform !duration-100 hover:scale-110 hover:!text-high-contrast lg:!-top-12 lg:!right-8 2xl:!right-16;
 }
 
 .pdp .glider-prev {

app/[locale]/page.tsx

@@ -1,14 +1,24 @@
 import DynamicContentManager from 'components/layout/dynamic-content-manager/dynamic-content-manager';
 import { homePageQuery } from 'lib/sanity/queries';
 import { clientFetch } from 'lib/sanity/sanity.client';
+import { Metadata } from 'next';
+import { notFound } from 'next/navigation';
 export const runtime = 'edge';
 
-export const metadata = {
-  description: 'High-performance ecommerce store built with Next.js, Vercel, Sanity and Storm.',
-  openGraph: {
-    type: 'website'
-  }
-};
+export async function generateMetadata({
+  params
+}: {
+  params: { slug: string; locale: string };
+}): Promise<Metadata> {
+  const homePage = await clientFetch(homePageQuery, params);
+
+  if (!homePage) return notFound();
+
+  return {
+    title: homePage.seo.title || homePage.title,
+    description: homePage.seo.description || homePage.description
+  };
+}
 
 interface HomePageParams {
   params: {

components/layout/dynamic-content-manager/dynamic-content-manager.tsx

@@ -1,13 +1,12 @@
 'use client';
 
-import { InfoCircledIcon } from '@radix-ui/react-icons';
-
 import BlurbSection from '@/components/modules/blurb-section/blurb-section';
 import FilteredProductList from '@/components/modules/filtered-product-list/filtered-product-list';
 import Hero from '@/components/modules/hero';
 import ReusableSection from '@/components/modules/reusable-section/reusable-section';
 import Slider from '@/components/modules/slider/slider';
 import USPSection from '@/components/modules/usp-section/usp-section';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
 interface getContentComponentProps {
   _type: string;
   _key: number;
@@ -19,13 +18,25 @@ const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentCompo
 
   switch (_type) {
     case 'hero':
-      Component = Hero;
+      if (disabled !== true) {
+        Component = Hero;
+      } else {
+        return;
+      }
       break;
     case 'slider':
-      Component = Slider;
+      if (disabled !== true) {
+        Component = Slider;
+      } else {
+        return;
+      }
       break;
     case 'filteredProductList':
-      Component = FilteredProductList;
+      if (disabled !== true) {
+        Component = FilteredProductList;
+      } else {
+        return;
+      }
       break;
     case 'blurbSection':
       if (disabled !== true) {

components/layout/footer/footer.tsx

@@ -21,7 +21,7 @@ export default async function Footer({ locale }: FooterProps) {
     <footer className="border-t border-ui-border bg-app">
       <div className="mx-auto flex w-full flex-col">
         <div className="flex w-full items-center justify-between p-4 transition-colors duration-150 md:space-y-0 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
-          <Link className="flex flex-initial items-center font-bold md:mr-24" href="/">
+          <Link href={`/${locale}`} className="flex flex-initial items-center font-bold md:mr-24">
             <Logo />
           </Link>
           <LocaleSwitcher />

components/layout/header/header.tsx

@@ -22,7 +22,7 @@ const Header = ({ locale }: HeaderProps) => {
 
           <div className="flex items-center">
             <Link
-              href={`/`}
+              href={`/${locale}`}
               className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out md:relative md:left-0 md:top-0 md:translate-x-0 md:translate-y-0"
               aria-label="Logo"
             >

components/modules/blurb-section/blurb-section.tsx

@@ -1,7 +1,5 @@
-import dynamic from 'next/dynamic';
-
-import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
-const Card = dynamic(() => import('components/ui/card'));
+import { Carousel, CarouselItem } from '@/components/modules/carousel/carousel';
+import Card from '@/components/ui/card/card';
 
 import Text from 'components/ui/text';
 

components/modules/filtered-product-list/filtered-product-list.tsx

@@ -1,14 +1,12 @@
-'use client'
+'use client';
 
-import Text from 'components/ui/text'
-import dynamic from 'next/dynamic'
-
-const ProductCard = dynamic(() => import('components/ui/product-card'))
+import ProductCard from '@/components/ui/product-card/product-card';
+import Text from 'components/ui/text';
 
 interface SliderProps {
-  products: any
-  title: string
-  itemsToShow: number
+  products: any;
+  title: string;
+  itemsToShow: number;
 }
 
 const FilteredProductList = ({ title, products, itemsToShow }: SliderProps) => {
@@ -19,17 +17,17 @@ const FilteredProductList = ({ title, products, itemsToShow }: SliderProps) => {
           {title}
         </Text>
       ) : (
-        <Text className="italic mb-4 lg:mb-6 2xl:mb-8" variant="sectionHeading">
+        <Text className="mb-4 italic lg:mb-6 2xl:mb-8" variant="sectionHeading">
           No title provided yet
         </Text>
       )}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         {products.slice(0, itemsToShow).map((product: any, index: number) => (
           <ProductCard key={`${product.id}-${index}`} product={product} />
         ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default FilteredProductList
+export default FilteredProductList;

components/modules/hero/hero.tsx

@@ -1,8 +1,6 @@
-import dynamic from 'next/dynamic';
-
+import SanityImage from '@/components/ui/sanity-image/sanity-image';
 import Link from 'components/ui/link/link';
 import Text from 'components/ui/text/text';
-const SanityImage = dynamic(() => import('components/ui/sanity-image'));
 
 interface HeroProps {
   variant: string;

components/modules/slider/slider.tsx

@@ -1,39 +1,36 @@
-import Text from 'components/ui/text'
-import dynamic from 'next/dynamic'
-import { useEffect, useState } from 'react'
+'use client';
 
-import { Carousel, CarouselItem } from 'components/modules/carousel/carousel'
+import Text from 'components/ui/text';
+import { useEffect, useState } from 'react';
 
-const ProductCard = dynamic(() => import('components/ui/product-card'))
-const CategoryCard = dynamic(() => import('components/ui/category-card'))
+import CategoryCard from '@/components/ui/category-card/category-card';
+import ProductCard from '@/components/ui/product-card/product-card';
+import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
 
 interface SliderProps {
-  products: [] | any
-  title: string
-  categories: [] | any
-  sliderType: String
+  products: [] | any;
+  title: string;
+  categories: [] | any;
+  sliderType: String;
 }
 
 const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
-  const [items, setItems] = useState([])
+  const [items, setItems] = useState([]);
 
   useEffect(() => {
-    if (sliderType === 'products') setItems(products)
-    else if (sliderType === 'categories') setItems(categories)
-  }, [])
+    if (sliderType === 'products') setItems(products);
+    else if (sliderType === 'categories') setItems(categories);
+  }, []);
 
   return (
     <div className="flex flex-col">
       {title ? (
-        <Text
-          className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
-          variant="sectionHeading"
-        >
+        <Text className="mb-4 px-4 lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16" variant="sectionHeading">
           {title}
         </Text>
       ) : (
         <Text
-          className="italic mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
+          className="mb-4 px-4 italic lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16"
           variant="sectionHeading"
         >
           No title provided yet
@@ -48,7 +45,7 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
             breakpoint: 1024,
             settings: {
               slidesToShow: 4.5
-            },
+            }
           }}
         >
           {items.map((item: any, index: number) => (
@@ -60,7 +57,7 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
         </Carousel>
       )}
     </div>
-  )
-}
+  );
+};
 
-export default Slider
+export default Slider;

components/product/product-view.tsx

@@ -6,9 +6,9 @@ import Text from 'components/ui/text/text';
 import { Product } from 'lib/storm/types/product';
 import { cn } from 'lib/utils';
 import { useTranslations } from 'next-intl';
-import dynamic from 'next/dynamic';
+import { Suspense } from 'react';
+import ProductCard from '../ui/product-card/product-card';
 import Price from './price';
-const ProductCard = dynamic(() => import('components/ui/product-card'));
 interface ProductViewProps {
   product: Product;
   relatedProducts: Product[];
@@ -81,31 +81,33 @@ export default function ProductView({ product, relatedProducts }: ProductViewPro
       </div>
 
       {relatedProducts.length > 0 && (
-        <section className="my-16 flex flex-col lg:my-24">
-          <Text className="px-4 lg:px-8 2xl:px-16" variant="sectionHeading">
-            {t('related')}
-          </Text>
+        <Suspense>
+          <section className="my-16 flex flex-col lg:my-24">
+            <Text className="px-4 lg:px-8 2xl:px-16" variant="sectionHeading">
+              {t('related')}
+            </Text>
 
-          <Carousel
-            gliderClasses={'px-4 lg:px-8 2xl:px-16'}
-            hasArrows={true}
-            hasDots={true}
-            slidesToShow={2.2}
-            slidesToScroll={1}
-            responsive={{
-              breakpoint: 1024,
-              settings: {
-                slidesToShow: 4.5
-              }
-            }}
-          >
-            {relatedProducts.map((p) => (
-              <CarouselItem key={`product-${p.path}`}>
-                <ProductCard product={p} />
-              </CarouselItem>
-            ))}
-          </Carousel>
-        </section>
+            <Carousel
+              gliderClasses={'px-4 lg:px-8 2xl:px-16'}
+              hasArrows={true}
+              hasDots={true}
+              slidesToShow={2.2}
+              slidesToScroll={1}
+              responsive={{
+                breakpoint: 1024,
+                settings: {
+                  slidesToShow: 4.5
+                }
+              }}
+            >
+              {relatedProducts.map((p) => (
+                <CarouselItem key={`product-${p.path}`}>
+                  <ProductCard product={p} />
+                </CarouselItem>
+              ))}
+            </Carousel>
+          </section>
+        </Suspense>
       )}
     </div>
   );

components/ui/product-card/product-card.tsx

@@ -1,15 +1,12 @@
 'use client';
 
+import SanityImage from '@/components/ui/sanity-image/sanity-image';
 import Price from 'components/product/price';
 import Text from 'components/ui/text';
 import type { Product } from 'lib/storm/types/product';
 import { cn } from 'lib/utils';
-import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { FC } from 'react';
-
-const SanityImage = dynamic(() => import('components/ui/sanity-image'));
-
 interface Props {
   className?: string;
   product: Product;