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 DynamicContentManager from 'components/layout/dynamic-content-manager';
-
+import { notFound } from "next/navigation";
-import dynamic from 'next/dynamic'
-
-const DynamicContentManager = dynamic(
-  () => import('components/layout/dynamic-content-manager')
-)
 
 interface SinglePageProps {
-  data: any
+  data: object | any
+}
+
+// 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();
   }
 
-const SinglePage = ({ data }: SinglePageProps) => {
   return (
     <DynamicContentManager content={data?.content} />
   )
 }
-
-export default SinglePage