如何将两个（或更多） API 道具传递给 NextJs 页面？

Question

我正在尝试使用来自不同 API 提取的两个道具来呈现页面。

地址栏如下所示：http://localhost:3000/startpage?id=1

代码如下所示，第一个 API 获取：

import { useRouter } from "next/router";

export const getServerSideProps = async (context) => {
  const { id } = context.query;

  const res = await fetch(`${process.env.BACKEND_URL}/User/${id}`);
  const data = await res.json();
  // console.log(data);

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

第二个 API 提取看起来像这样

export const getServerSideProps2 = async (context) => {
  const { id } = context.query;

  const res = await fetch(`${process.env.BACKEND_URL}/User/${id}/favorites`);
  const data = await res.json();
  //console.log(data);

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

然后我尝试渲染的页面如下所示：

function StartPage( {user, favorites} ){
  return (
    <div>
      <div className={styles.formGroup}>
        <h1>Welcome {user.name}</h1>
      </div>
      <div>
        <h1>These are your favorite movies:</h1>
        {favorites.map(favorite => (
          <div key={favorite.id}>
            <h5>favorite.name</h5>
          </div>
          
        ))}
      </div>
    </div>
  )
}

我猜有一种方法可以将两个 API 提取放在同一个 function 中。 但我不知道该怎么做。 如果有人对如何做到这一点有任何建议，我很乐意倾听。

先感谢您。

Answer 1

您可以使用相同的方法进行调用并传递两个数据：

export const getServerSideProps = async (context) => {
  const { id } = context.query;

  const res = await fetch(`${process.env.BACKEND_URL}/User/${id}`);
  const data = await res.json();

  const resFav = await fetch(`${process.env.BACKEND_URL}/User/${id}/favorites`);
  const dataFav = await resFav.json();

  return {
    props: { user: data, favorites: dataFav },
  };
};

无需声明getServerSideProps2

Answer 2

在您的帮助和一些调整下，我能够解决它。 谢谢你们。 为了我，无需进一步评论。