Fix slugs for pages

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

@@ -1,3 +1,4 @@
+import { notFound } from "next/navigation";
 
 interface CategoryPageProps {
   data: object | any
@@ -6,7 +7,11 @@ interface CategoryPageProps {
 // This is a Client Component. It receives data as props and
 // has access to state and effects just like Page components
 // in the `pages` directory.
-export default function ProductPage({data }: CategoryPageProps) {
+export default function CategoryPage({data }: CategoryPageProps) {
+
+  if (!data) {
+    return notFound();
+  }
 
   return (
     <div>Category: {data?.title}</div>

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

@@ -2,7 +2,6 @@ import getQueryFromSlug from 'helpers/getQueryFromSlug';
 import { docQuery } from 'lib/sanity/queries';
 import { client } from 'lib/sanity/sanity.client';
 import type { Metadata } from 'next';
-import { groq } from 'next-sanity';
 import CategoryPage from './category-page';
 import HomePage from './home-page';
 import ProductPage from './product-page';
@@ -12,7 +11,7 @@ import SinglePage from './single-page';
  * Get paths for each page.
  */
 export async function generateStaticParams() {
-  const paths = await client.fetch(groq`${docQuery}`, {
+  const paths = await client.fetch(docQuery, {
     next: { revalidate: 10 },
   })
 
@@ -30,6 +29,7 @@ export async function generateStaticParams() {
  * If we're in "preview mode" and have multiple documents, return the draft
  */
 function filterDataToSingleItem(data: any, preview = false) {
+  
   if (!Array.isArray(data)) {
     return data
   }
@@ -57,10 +57,10 @@ export async function generateMetadata({ params }: {params: { slug: string[], lo
 
   const data = filterDataToSingleItem(pageData, false)
 
-  const { seo, title } = data ?? {};
+  const { seo } = data ?? {};
 
   return {
-    title: seo?.title ? seo?.title : title,
+    title: seo?.title ? seo?.title : data?.title,
     description: seo?.description
       ? seo.description
       : 'Webb och digitalbyrå från Göteborg',

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

@@ -1,19 +1,20 @@
-'use client'
-
-import dynamic from 'next/dynamic'
-
-const DynamicContentManager = dynamic(
-  () => import('components/layout/dynamic-content-manager')
-)
+import DynamicContentManager from 'components/layout/dynamic-content-manager';
+import { notFound } from "next/navigation";
 
 interface SinglePageProps {
-  data: any
+  data: object | any
 }
 
-const SinglePage = ({ data }: SinglePageProps) => {
+// This is a Client Component. It receives data as props and
+// has access to state and effects just like Page components
+// in the `pages` directory.
+export default function SinglePage({data }: SinglePageProps) {
+
+  if (!data) {
+    return notFound();
+  }
+
   return (
     <DynamicContentManager content={data?.content} />
   )
 }
-
-export default SinglePage

lib/sanity/queries.tsx

@@ -178,32 +178,32 @@ export const productQuery = `*[_type == "product" && slug.current == $slug && la
     slug,
     "locale": language
   },
-    "product": {
-      id,
-      "name": title,
-      description,
-      "descriptionHtml": "",
-      images[] {
-        ${imageFields}
-      },
-      price {
-        value,
-        currencyCode,
-        retailPrice
-      },
-      options[] {
-        id,
-        displayName,
-        values[] {
-          label,
-          "hexColors": hexColors.hex
-        }
-      },
-      "variants": []
+  "product": {
+    id,
+    "name": title,
+    description,
+    "descriptionHtml": "",
+    images[] {
+      ${imageFields}
     },
-    seo {
-      ${seoFields}
-    }
+    price {
+      value,
+      currencyCode,
+      retailPrice
+    },
+    options[] {
+      id,
+      displayName,
+      values[] {
+        label,
+        "hexColors": hexColors.hex
+      }
+    },
+    "variants": []
+  },
+  seo {
+    ${seoFields}
+  }
 }`
 
 // Category query