Troubleshooting undefined data in Next.js and Sanity integration

const myquery = `*[_type == "post"] {
    title,
    _id,
    mainImage,
   body
    }`

export const Post = ({posts, title, image}) => {

    console.log(posts, title, image);
    return (
        <div>
        <h1>Post</h1>
        </div>
    );
};

export const getServersideprops = async () => {
    const result = await client.fetch(myquery)
    return {
        props: {
            title: result.title,
            posts: result.body,
            image: result.mainImage,
        }
    }
}

import Head from 'next/head'
import Image from 'next/image'
import {sanityClient, urlFor} from '../sanity';



export default function Home({posts}) {

    console.log(posts);

  return (
    <h1>Welcome</h1>
  );
}


export const getServerSideprops = async () => {
  const query = `*[_type == "post"] {
    title,
    _id,
    mainImage,
    body
    }`
  const posts = await sanityClient.fetch(query)
  return {
    props: {
      posts,
    }
  }
}
 

import {
    createClient,
    createPortableTextComponent,
    createImageUrlBuilder,
    createPreviewSubscriptionHook
  } from "next-sanity";

export const config = {
    /**
     * Find your project ID and dataset in `sanity.json` in your studio project.
     * These are considered "public", but you can use environment variables
     * if you want differ between local dev and production.
     *
     * <https://nextjs.org/docs/basic-features/environment-variables>
     **/
    dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
    apiVersion: "2021-08-11", // or today's date for latest
    /**
     * Set useCdn to `false` if your application require the freshest possible
     * data always (potentially slightly slower and a bit more expensive).
     * Authenticated request (like preview) will always bypass the CDN
     **/
    useCdn: process.env.NODE_ENV === "production",
  };

  // setup the client for fetching data in the getProps page functions
  export const sanityClient = createClient(config);

  export const urlFor = (source) =>
  createImageUrlBuilder(config).image(source);


// export const useCurrentUser = createCurrentUserHook(config);

export const getServerSideprops = async () => {
  const query = `*[_type == "post"][0] {
    title,
    _id,
    mainImage,
    body
    }`
  const posts = await sanityClient.fetch(query);
  
  return {
    props: {
      posts,
    },
  }
  console.log({posts});
}