vendor page

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

@@ -1,8 +1,12 @@
 import { notFound } from 'next/navigation'
 import directus from '~/lib/directus'
 
-async function getVendor(slug) {
-  return directus.items('vendors').readByQuery({
+export const getServerSideProps = async ({ params }) => {
+  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 }) {
-  const {
-    data: [vendor],
-  } = await getVendor(params.slug)
-
-  if (!vendor) {
-    notFound()
-  }
-
+export default function VendorPage({ vendor }) {
   return (
     <div>
       <h1>{vendor.name}</h1>