I am building a simple blog website with Next.js and Sanity. I am able to render the list of posts on a /blog route, but when I click the link to navigate to a specific post, I am unable to render anything to the screen.

import client from '../../client'

export default function Post({post}) {
  console.log(post)
  return (
    <main className="px-5 m-auto mt-10 max-w-7xl">
      <h1 className="text-5xl font-bold"></h1>
    </main>
  )
}

export const getStaticPaths = async () => {
  const paths = await client.fetch(
    `*[_type == "post" && defined(slug.current)]{
      "params": {
        "slug": slug.current
      }
    }`
  )

  console.log(paths)

  return {
    paths,
    fallback: true,
  }
}

export const getStaticProps = async ({params}) => {
  const query = `*[_type == "post" && slug.current == $slug][0]{
    _id,
    _createdAt,
    title,
    author->{
      name,
      image
    }
    mainImage,
    slug,
    body
  }`

  const {slug} = params

  const post = await client.fetch(query, {slug})

  return {
    props: post,
  }
}