Links and data fetching for dynamic routes

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

@@ -6,6 +6,8 @@ import CategoryPage from './pages/category-page';
 import ProductPage from './pages/product-page';
 import SinglePage from './pages/single-page';
 
+export const runtime = 'edge';
+
 export const revalidate = 43200; // 12 hours in seconds
 
 export async function generateMetadata({
@@ -44,11 +46,25 @@ export default async function Page({ params }: PageParams) {
 
   const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale);
 
+  let pageData;
+
+  if (docType === 'page') {
+    pageData = await clientFetch(query, queryParams);
+  } else if (docType === 'product') {
+    pageData = await clientFetch(query, queryParams);
+  } else if (docType === 'category') {
+    pageData = await clientFetch(query, queryParams);
+  } else {
+    return;
+  }
+
+  if (!pageData) return notFound();
+
   return (
     <>
-      {docType === 'page' && <SinglePage query={query} queryParams={queryParams} />}
-      {docType === 'product' && <ProductPage query={query} queryParams={queryParams} />}
-      {docType === 'category' && <CategoryPage query={query} queryParams={queryParams} />}
+      {docType === 'page' && <SinglePage data={pageData} />}
+      {docType === 'product' && <ProductPage data={pageData} />}
+      {docType === 'category' && <CategoryPage data={pageData} />}
     </>
   );
 }

app/[locale]/[...slug]/pages/category-page.tsx

@@ -1,21 +1,13 @@
 import Search from '@/components/search/search';
 import SearchResult from '@/components/search/search-result';
 import Text from '@/components/ui/text/text';
-import { clientFetch } from '@/lib/sanity/sanity.client';
-import { notFound } from 'next/navigation';
 
 interface CategoryPageParams {
-  query: string;
-  queryParams: {
-    slug: string;
-    locale: string;
-  };
+  data: object | any;
 }
 
-export default async function CategoryPage({ query, queryParams }: CategoryPageParams) {
-  const category = await clientFetch(query, queryParams);
-
-  if (!category) return notFound();
+export default async function CategoryPage({ data }: CategoryPageParams) {
+  const category = data;
 
   const { title } = category;
 

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

@@ -1,19 +1,10 @@
 import ProductView from '@/components/product/product-view';
-import { clientFetch } from '@/lib/sanity/sanity.client';
-import { notFound } from 'next/navigation';
-
 interface ProductPageParams {
-  query: string;
-  queryParams: {
-    slug: string;
-    locale: string;
-  };
+  data: object | any;
 }
 
-export default async function ProductPage({ query, queryParams }: ProductPageParams) {
-  const product = await clientFetch(query, queryParams);
-
-  if (!product) return notFound();
+export default async function ProductPage({ data }: ProductPageParams) {
+  const product = data;
 
   const productJsonLd = {
     '@context': 'https://schema.org',

app/[locale]/[...slug]/pages/single-page.tsx

@@ -1,23 +1,13 @@
 import DynamicContentManager from '@/components/layout/dynamic-content-manager/dynamic-content-manager';
-import { clientFetch } from '@/lib/sanity/sanity.client';
-import { notFound } from 'next/navigation';
 
 interface SinglePageParams {
-  query: string;
-  queryParams: {
-    slug: string;
-    locale: string;
-  };
+  data: object | any;
 }
 
-export default async function SinglePage({ query = '', queryParams }: SinglePageParams) {
-  const page = await clientFetch(query, queryParams);
-
-  if (!page) return notFound();
-
+export default async function SinglePage({ data }: SinglePageParams) {
   return (
-    <div>
-      <DynamicContentManager content={page?.content} />;
-    </div>
+    <>
+      <DynamicContentManager content={data?.content} />;
+    </>
   );
 }

app/[locale]/page.tsx

@@ -3,6 +3,7 @@ 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 async function generateMetadata({

components/cart/modal.tsx

@@ -7,8 +7,8 @@ import { DEFAULT_OPTION } from 'lib/constants';
 import type { Cart } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import { useTranslations } from 'next-intl';
+import Link from 'next-intl/link';
 import Image from 'next/image';
-import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
 import DeleteItemButton from './delete-item-button';
 import EditItemQuantityButton from './edit-item-quantity-button';

components/layout/header/desktop-menu/desktop-menu.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import Link from 'next/link';
+import Link from 'next-intl/link';
 
 export default function DesktopMenu({ items }: { items: [] }) {
   return (

components/layout/header/mobile-menu/modal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
-import Link from 'next/link';
+import Link from 'next-intl/link';
 import { useState } from 'react';
 import OpenMobileMenu from './open-mobile-menu';
 

components/layout/header/search/modal.tsx

@@ -9,7 +9,7 @@ import OpenSearch from './open-search';
 import { Highlight, Hits } from 'react-instantsearch';
 
 import Search from '@/components/search/search';
-import Link from 'next/link';
+import Link from 'next-intl/link';
 
 export default function SearchModal() {
   const [isOpen, setIsOpen] = useState(false);

components/product/gallery.tsx

@@ -2,8 +2,8 @@
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import { createUrl } from 'lib/utils';
+import Link from 'next-intl/link';
 import Image from 'next/image';
-import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
 
 export function Gallery({ images }: { images: { src: string; alt: string }[] }) {

components/product/product-view.tsx

@@ -18,7 +18,7 @@ import { Grid } from './grid';
 
 interface ProductViewProps {
   product: Product;
-  relatedProducts: Product[];
+  relatedProducts?: Product[];
 }
 
 export default function ProductView({ product, relatedProducts }: ProductViewProps) {

components/product/variant-selector.tsx

@@ -3,7 +3,7 @@
 import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
-import Link from 'next/link';
+import Link from 'next-intl/link';
 import { usePathname, useSearchParams } from 'next/navigation';
 
 type Combination = {
@@ -91,8 +91,8 @@ export function VariantSelector({
               className={clsx(
                 'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
                 {
-                  'cursor-default ring-2 ring-blue-600': isActive,
-                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
+                  'ring-blue-600 cursor-default ring-2': isActive,
+                  'hover:ring-blue-600 ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 ':
                     !isActive && isAvailableForSale,
                   'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
                     !isAvailableForSale

components/search/search-result.tsx

@@ -3,7 +3,7 @@
 import Text from '@/components/ui/text/text';
 import { cn } from '@/lib/utils';
 import { useTranslations } from 'next-intl';
-import Link from 'next/link';
+import Link from 'next-intl/link';
 import { Configure, Highlight, InfiniteHits } from 'react-instantsearch';
 
 export default function SearchResult() {

components/ui/card/card.tsx

@@ -2,7 +2,7 @@
 
 import SanityImage from 'components/ui/sanity-image';
 import { cn } from 'lib/utils';
-import Link from 'next/link';
+import Link from 'next-intl/link';
 import { FC } from 'react';
 
 interface CardProps {

components/ui/category-card/category-card.tsx

@@ -1,6 +1,6 @@
 import SanityImage from 'components/ui/sanity-image';
 import { cn } from 'lib/utils';
-import Link from 'next/link';
+import Link from 'next-intl/link';
 import { FC } from 'react';
 interface Props {
   className?: string;

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

@@ -8,7 +8,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { LanguageIcon } from '@heroicons/react/24/outline';
 import { useLocale, useTranslations } from 'next-intl';
-import Link from 'next/link';
+import Link from 'next-intl/link';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 import { supportedLanguages } from '../../../i18n-config';

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

@@ -5,7 +5,7 @@ import type { Product } from '@/lib/storm/product';
 import Price from 'components/price';
 import Text from 'components/ui/text';
 import { cn } from 'lib/utils';
-import Link from 'next/link';
+import Link from 'next-intl/link';
 import { FC } from 'react';
 interface Props {
   className?: string;

middleware.ts

@@ -6,6 +6,7 @@ export default createMiddleware({
 
   // If this locale is matched, pathnames work without a prefix (e.g. `/about`)
   defaultLocale: 'sv',
+  localeDetection: false
 });
 
 export const config = {