vendor page

frontend/pages/[slug]/index.js

@@ -1,7 +1,6 @@
-import { notFound } from 'next/navigation'
 import directus from '~/lib/directus'
 
-export const getStaticPaths = async () => {
+export const getServerSideProps = async () => {
   const { data: pages } = await directus.items('pages').readByQuery({
     limit: 1,
   })

frontend/pages/vendors/[slug]/index.js

@@ -1,8 +1,12 @@
 import { notFound } from 'next/navigation'
 import directus from '~/lib/directus'
 
-async function getVendor(slug) {
+export const getServerSideProps = async ({ params }) => {
-  return directus.items('vendors').readByQuery({
+  const { slug } = params
+
+  const {
+    data: [vendor],
+  } = await directus.items('vendors').readByQuery({
     fields: [
       //
       '*',
@@ -15,17 +19,13 @@ async function getVendor(slug) {
     limit: 1,
     filter: { slug: { _eq: slug } },
   })
+
+  if (!vendor) return notFound()
+
+  return { props: { vendor } }
 }
 
-export default async function VendorPage({ params }) {
+export default function VendorPage({ vendor }) {
-  const {
-    data: [vendor],
-  } = await getVendor(params.slug)
-
-  if (!vendor) {
-    notFound()
-  }
-
   return (
     <div>
       <h1>{vendor.name}</h1>

frontend/pages/vendors/index.js

@@ -49,7 +49,7 @@ export default function VendorsPage({ vendors, meta, page }) {
 
   const handlePageChange = (nextPage) => {
     setCurrentPage(nextPage)
-    router.replace(`/vendors?page=${nextPage}`)
+    router.replace(`?page=${nextPage}`)
   }
 
   return (