I make Next JS project and I am new to coding in this program and have a "Service" folder. In this folder there are index.js and [id].js (details page). All data come from Next API. Index.js works, there is no problem. But when I click the details element the error is seen. I don't know what is my mistake

Error: Error serializing `.data` returned from `getServerSideProps` in "/services/[id]". Reason: `object` ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types.

index.js

      <section className="services-main">
        <div className="services-main-context container">
          <MainPageServices posts={posts} />
        </div>
      </section>

     ....

export async function getStaticProps() {
  const res = await fetch("http://localhost:3000/api/servicesApi/");
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

MainPageServices component

     <div className="main-page-services-cards">
        {posts.map((card, key) => (
           <div key={card.id} className="service-card">
              <Link href={`/services/${card.id}`}>
                 <a>
                   <div className="card-img">
                      <Image src={card.img} alt="Services" />
                   </div>
                 </a>
              </Link>
           </div>
        ))}
      </div>

Not working component (Details)

const ServiceDetails = ({ data }) => {
  
  console.log(data);
       return (
         <h1>{data.header}</h1>)  
       );
  };


export const getServerSideProps = async (context) => {
  const res = await fetch(`http://localhost:3000/api/servicesApi/${context.params.id}`);
  const data = res.json();

  return {
    props: {
      data,
    },
  };
};

My details page API

import { servicesData } from "../../../data";

export default function handler(req, res) {
  const { id } = req.query;
  const service = servicesData.find((service) => service.id === parseInt(id));
  res.status(200).json(service);
}