My goal is to be able to add new posts the CMS(Sanity.io) after build-time, and for the site to be able to display received data on a provided slug using dynamic routes.

Everything works well in dev environment, but in production it seems the page can't use the new slugs provided from the CMS, and responds with a 404.

Here's my code getting the posts from the CMS, inside my [slug].tsx file.

[slug.tsx]

export const getStaticPaths: GetStaticPaths = async () => {
  const query = `
  *[_type=='post']{
    _id,
    slug {
      current
    }
  }`

  const posts = await sanityClient.fetch(query)

  const paths = posts.map((post: Post) => ({
    params: {
      slug: post.slug.current,
    },
  }))

  return {
    paths,
    fallback: 'blocking',
  }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const query = `
  *[_type=='post' && slug.current == $slug][0]{
    _id,
    publishedAt,
    title,
    description,
    mainImage,
    gallery[0]->{
      title,
      link,
      images,
      display,
    },
    slug,
    body
  }`
  const post = await sanityClient.fetch(query, { slug: params?.slug })

  return {
    props: {
      post,
    },
    revalidate: 10,
  }
}

When I add new posts in the CMS I immediately see the thumbnail come up on the website, with the correct image and other data, but when I click the thumbnail I get 404.

I hope someone can help me!