Restructured app to work better with localized slugs

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

@@ -1,35 +1,19 @@
 import Search from '@/components/search/search';
 import SearchResult from '@/components/search/search-result';
 import Text from '@/components/ui/text/text';
-import { categoryQuery } from '@/lib/sanity/queries';
 import { clientFetch } from '@/lib/sanity/sanity.client';
-import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
-export async function generateMetadata({
-  params
-}: {
-  params: { slug: string; locale: string };
-}): Promise<Metadata> {
-  const category = await clientFetch(categoryQuery, params);
-
-  if (!category) return notFound();
-
-  return {
-    title: category.seo.title || category.title,
-    description: category.seo.description || category.description
-  };
-}
-
 interface CategoryPageParams {
-  params: {
-    locale: string;
+  query: string;
+  queryParams: {
     slug: string;
+    locale: string;
   };
 }
 
-export default async function ProductPage({ params }: CategoryPageParams) {
-  const category = await clientFetch(categoryQuery, params);
+export default async function CategoryPage({ query, queryParams }: CategoryPageParams) {
+  const category = await clientFetch(query, queryParams);
 
   if (!category) return notFound();
 

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

@@ -0,0 +1,37 @@
+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;
+  };
+}
+
+export default async function ProductPage({ query, queryParams }: ProductPageParams) {
+  const product = await clientFetch(query, queryParams);
+
+  if (!product) return notFound();
+
+  const productJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.name,
+    description: product.description,
+    image: product.images[0].asset.url
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(productJsonLd)
+        }}
+      />
+      <ProductView product={product} relatedProducts={[]} />;
+    </>
+  );
+}

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

@@ -0,0 +1,23 @@
+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;
+  };
+}
+
+export default async function SinglePage({ query = '', queryParams }: SinglePageParams) {
+  const page = await clientFetch(query, queryParams);
+
+  if (!page) return notFound();
+
+  return (
+    <div>
+      <DynamicContentManager content={page?.content} />;
+    </div>
+  );
+}

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

@@ -1,8 +1,10 @@
-import DynamicContentManager from 'components/layout/dynamic-content-manager';
-import { pageQuery } from 'lib/sanity/queries';
+import getQueryFromSlug from '@/helpers/get-query-from-slug';
 import { clientFetch } from 'lib/sanity/sanity.client';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import CategoryPage from './components/category-page';
+import ProductPage from './components/product-page';
+import SinglePage from './components/single-page';
 
 export const runtime = 'edge';
 
@@ -13,24 +15,13 @@ export async function generateMetadata({
 }: {
   params: { locale: string; slug: string[] };
 }): Promise<Metadata> {
-  let queryParams = {
-    locale: params.locale,
-    slug: ''
-  };
+  const { slug, locale } = params;
 
-  if (params.slug.length > 1) {
-    queryParams = {
-      locale: params.locale,
-      slug: `${params.slug.join('/')}`
-    };
-  } else {
-    queryParams = {
-      locale: params.locale,
-      slug: `${params.slug}`
-    };
-  }
+  console.log(slug, locale);
 
-  const page = await clientFetch(pageQuery, queryParams);
+  const { query = '', queryParams } = getQueryFromSlug(slug, locale);
+
+  const page = await clientFetch(query, queryParams);
 
   if (!page) return notFound();
 
@@ -53,28 +44,15 @@ interface PageParams {
 }
 
 export default async function Page({ params }: PageParams) {
-  console.log(params);
+  const { slug, locale } = params;
 
-  let queryParams = {
-    locale: params.locale,
-    slug: ''
-  };
+  const { query = '', queryParams, docType } = getQueryFromSlug(slug, locale);
 
-  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();
-
-  return <DynamicContentManager content={page?.content} />;
+  return (
+    <>
+      {docType === 'page' && <SinglePage query={query} queryParams={queryParams} />}
+      {docType === 'product' && <ProductPage query={query} queryParams={queryParams} />}
+      {docType === 'category' && <CategoryPage query={query} queryParams={queryParams} />}
+    </>
+  );
 }

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

@@ -1,79 +0,0 @@
-import ProductView from 'components/product/product-view';
-import { productQuery } from 'lib/sanity/queries';
-import { clientFetch } from 'lib/sanity/sanity.client';
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-
-interface ProductPageParams {
-  params: {
-    locale: string;
-    slug: string;
-  };
-}
-
-export async function generateMetadata({
-  params
-}: {
-  params: { slug: string; locale: string };
-}): Promise<Metadata> {
-  const product = await clientFetch(productQuery, params);
-
-  if (!product) return notFound();
-
-  const { alt } = product.images[0] || '';
-  const { url } = product.images[0].asset || {};
-  const { width, height } = product.images[0].asset.metadata.dimensions;
-  // const indexable = !product.tags.includes(HIDDEN_PRODUCT_TAG);
-
-  return {
-    title: product.seo.title || product.title,
-    description: product.seo.description || product.description,
-    // @TODO ROBOTS SETTINGS???
-    // robots: {
-    //   index: indexable,
-    //   follow: indexable,
-    //   googleBot: {
-    //     index: indexable,
-    //     follow: indexable
-    //   }
-    // },
-    openGraph: url
-      ? {
-          images: [
-            {
-              url,
-              width,
-              height,
-              alt
-            }
-          ]
-        }
-      : null
-  };
-}
-
-export default async function ProductPage({ params }: ProductPageParams) {
-  const product = await clientFetch(productQuery, params);
-
-  if (!product) return notFound();
-
-  const productJsonLd = {
-    '@context': 'https://schema.org',
-    '@type': 'Product',
-    name: product.name,
-    description: product.description,
-    image: product.images[0].asset.url
-  };
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{
-          __html: JSON.stringify(productJsonLd)
-        }}
-      />
-      <ProductView product={product} relatedProducts={[]} />;
-    </>
-  );
-}