Next JS [id] error 序列化從“/services/[id]”中的`getServerSideProps`返回的`.data`時出錯

Question

我制作了 Next JS 項目，並且我是該程序中編碼的新手，並且有一個“服務”文件夾。 在這個文件夾中有 index.js 和 [id].js（詳情頁）。 所有數據均來自 Next API。 Index.js 工作，沒有問題。 但是當我單擊詳細信息元素時，會看到錯誤。 我不知道我的錯誤是什么

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 組件

     <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>

不工作的組件（詳細信息）

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,
    },
  };
};

我的詳細信息頁面 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);
}

Answer 1

我認為您需要等待 res.json() 因為您的錯誤表明您正在將承諾傳遞給您的道具。

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 = await res.json();

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