My main objective is to enable the addition of new posts to the CMS (Sanity.io) post-build, and have the website display the received data on a designated slug through dynamic routes.
While everything functions smoothly in the development environment, I encounter an issue in production where the page fails to utilize the new slugs from the CMS, resulting in a 404 error.
Below is the snippet of code responsible for fetching posts from the CMS within 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,
}
}
Although I can see the thumbnail of newly added posts on the website immediately after being uploaded to the CMS, complete with correct image and data, clicking on the thumbnail leads me to a 404 error page.
I am hopeful that someone can provide assistance!