如何在 Nextjs 的 getStaticProps 中传递参数答案

【问题标题】：How to pass a parameter in getStaticProps in Nextjs如何在 Nextjs 的 getStaticProps 中传递参数
【发布时间】：2021-09-25 00:51:46
【问题描述】：

我只是想问当用户“单击搜索按钮”并在 NextJS 中显示适当的结果时如何调用 API。谢谢！

这是我正在使用的 API https://www.themealdb.com/api/json/v1/1/search.php?s=Steak 并注意“牛排”这个词是我想看到的食物。

这是我在开发模式下的网址 http://localhost:3000/search/steak/。

我想在 getStaticProps 中传递“牛排”，并在我的组件中传递 getStaticProps 的结果。

export const getStaticProps = async () => {
  const res = await axios.get(
    'https://www.themealdb.com/api/json/v1/1/search.php?s=Steak'
  );

  return {
    props: {
      meals: res.data,
    },
  };
};

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

我认为你做不到。 GetStaticProps 在构建时渲染页面，因此您无法根据用户请求渲染页面。我建议你阅读this docs, section 'when I should use GetStaticProps'。您可以使用反应状态或GetServerSideProps（阅读相同的文档）。您还可以使用 GetStaticPath 静态渲染一堆页面，并传递例如 10 个搜索最多的食物。

【讨论】：