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

Posted 2023-03-30

【中文标题】如何从 Nextjs 中的另一个页面将附加数据传递给 getserversideprops？

【英文标题】：How to pass additional data to getserversideprops from another page in Nextjs?

【发布时间】：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。

【参考方案1】：

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

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

这是一个使用 useContext 的example。

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

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