next.js中如何根据查询参数显示不同状态的页面

Question

我想在 next.js 中根据不同的查询参数显示不同状态的页面，这样当用户使用带有查询参数的链接时，它不应该显示默认页面，而是基于状态。

为简单起见 将主页设为localhost:3000 这会呈现一些默认文本“Hello user” 如果用户输入localhost:3000/?name=JohnDoe 这应该会渲染 Hello JohnDoe。

我尝试过的事情。 我可以通过 next router 使用事件处理程序添加查询参数。 router.push('/?name=JohnDoe) 但是我不知道当用户使用带有查询参数的链接直接进入页面时设置状态的解决方案

Answer 1

您可以在 getServerSideProps 中访问查询，然后使用该查询重定向或做任何您想做的事情：

const getServerSideProps = (ctx) => {
   const {params} = ctx;
   
   if(params){
     return {
        redirect: {
        permanent: false,
        destination: "/login",
     }
   }
}