I'm developing a blog using nextJS & sanity. And I connected sanity with nextJS and it's perfectly working in development mode. But when I try to deploy in Vercel or build through the VSCode, it shows the below error.
info - Generating static pages (0/8)TypeError: Cannot destructure property 'title' of 'post' as it is undefined.
Here is my component overview
export default function SinglePost({ post }) {
const {
title,
imageUrl,
publishedAt,
description,
topics,
rescources,
sourcecode,
body = [],
} = post;
return(
<div>
<h1>{title}</h1>
//remaining code....
</div>)
}
const query = groq`*[_type == "post" && slug.current == $slug][0]{
"title": title,
"imageUrl": mainImage.asset->url,
description,
"topics": topics[],
"rescources": rescources[],
"sourcecode": sourcecode,
"publishedAt": publishedAt,
body,
}`;
export async function getStaticPaths() {
const paths = await client.fetch(
`*[_type == "post" && defined(slug.current)][].slug.current`
);
return {
paths: paths.map((slug) => ({ params: { slug } })),
fallback: true,
};
}
export async function getStaticProps(context) {
const { slug = "" } = context.params;
const post = await client.fetch(query, { slug });
return {
props: {
post,
},
};
}
I was able to solve this problem.
Solution: Without destructuring 'title', I got a value through the direct access
<h1>{post.title}</h1>