如何从 Nextjs 中的另一个页面将附加数据传递给 getserversideprops？答案

【问题标题】：How to pass additional data to getserversideprops from another page in Nextjs?如何从 Nextjs 中的另一个页面将附加数据传递给 getserversideprops？
【发布时间】：2021-03-18 22:34:38
【问题描述】：

我想将上一页中的projectID(/projects) 传递给 (/project/[projectName])。因此，为了获取项目详细信息，我必须使用 projectID. 触发 API 端点

从上一页传递projectID的正确方法是什么，以及如何在getServersideProps方法中访问它。

在/project/[projectName] 页面中，

export async function getServerSideProps(){
// Here i want to access the projectID sent from the previous page
const data = await fetchData();
return {
    props: data,
  };
}

Query/param prop 可以访问 projectName 但不能访问 projectID。

【问题讨论】：

标签： reactjs next.js server-side-rendering

【解决方案1】：

由于每次加载页面时 serverSideProps 都会运行，因此您无法将数据从一个页面传递到另一个页面。

您可以做的是使用 useContext 传递数据，或者如果它是您要在所有页面上使用的一般数据，您可以直接将其获取到 _app.js 并将其传递给所有子组件。

这是一个使用 useContext 的example。

这是在 _app.js 上获取的 docs。（查看注释代码）

您甚至可以结合这两种技术并在 _app.js 上设置数据并在任何页面或组件上使用它。

【讨论】：