I’m trying to implement server side rendering in Nextjs using sanity studio to fetch the posts.
interface Props {
posts: [Post];
}
export default function Home({ posts }: Props){
return (
<div className="max-w-7xl mx-auto">
<Head>
<title>APP</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
<div>
{posts?.map((post) => (
<Link key={post._id} href={`/post/${post.slug.current}`}>
<div>
<img src={urlFor(post.mainImage).url()!} alt="" />
</div>
<div>
<div>
<p>{post.title}</p>
<p>
{post.description} by {post.author.name}
</p>
</div>
<img src={urlFor(post.author.image).url()!} alt="" />
</div>
</Link>
))}
</div>
</div>
);
};
export const getServerSideProps = async () => {
const query = `*[_type == "post"]{
_id,
title,
author ->{
name,
image
},
description,
mainImage,
slug
}`
const post = await sanityClient.fetch(query);
return { props: { post } }
};
When fetching the post I get error saying post is undefined. Please any help will be appreciated, so i would know what I’m doing wrongly or missed.
>Solution :
You are expecting a posts property so you should pass:
const posts = await sanityClient.fetch(query);
return { props: { posts } }