Next.js中getServerSideProps重定向后能否获取传递的props？

核心结论 #

你无法在重定向目标页拿到你传入的props，getServerSideProps返回对象中redirect和props为互斥字段，只要返回了redirect配置，props字段会被Next.js直接忽略，不会做任何传递。

底层原因 #

服务端重定向的本质是当前请求返回3xx状态码，触发浏览器发起对目标地址的全新请求，两次请求完全隔离，原请求的上下文数据不会自动带到新请求中。

可行解决方案 #

• 若传递少量非敏感数据，可将参数拼接在重定向地址的query中，示例代码如下：

return {
  redirect: {
    destination: `/auth-page?userId=${user.id}`,
    permanent: false,
  }
}

之后在/auth-page的getServerSideProps中读取query参数，处理为对应props即可。

• 若传递用户状态这类敏感数据，可将数据存入Cookie或服务端session中，在目标页的getServerSideProps读取Cookie/session中的数据，再初始化需要的redux状态。
• 若可以接受客户端跳转的体验，可取消服务端重定向，先返回props给当前页，在当前页组件的useEffect中通过Router.push的state参数携带数据跳转，该方案不适合需要SEO的场景。

内容的提问来源于stack exchange，提问作者magicDev