在 NextJS 中从服务器端重定向答案

【问题标题】：Redirecting from server side in NextJS在 NextJS 中从服务器端重定向
【发布时间】：2019-07-03 09:49:43
【问题描述】：

我正在开发一个 Next.JS 应用程序，用户应该登录以查看内容。如果用户的用户名和密码正确，我想将用户重定向到“/”。但是我的实现似乎不起作用。

我在 SO 上搜索了有关此的问题，但他们都在谈论使用 getInitialProps 重定向，但这对我没有帮助，因为我想从我的自定义快递服务器重定向用户。

Login.js

 async handleSubmit(event) {
  event.preventDefault()
  const { username, password } = this.state

  try {
    const response = await fetch('/log_in', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    })
  }

 catch (error) {
    console.log(error)
  }
}

server.js

app.post('/log_in', (req,res) => {
    console.log(`login form data`);
    console.log(`Username : ${req.body.username}`);
    console.log(`password : ${req.body.password}`);
    if(req.body.username == "user" && req.body.password == "123"){
        res.redirect('/')
    }
})

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

这现在可以在 Next.js 10+ 上实现，而无需直接进行任何类型的响应标头操作。如果满足您的条件，请使用 getServerSideProps 或 getStaticProps 并返回 redirect 作为唯一值：

export async function getServerSideProps(context) {
  if(req.body.username == "user" && req.body.password == "123"){
    return {
      redirect: {
        permanent: false,
        destination: "/"
      }
    }
  }
}

【讨论】：

值得一提的是，要使其正常工作，Next 还需要默认导出页面组件。例如，export default function Redirect() { }
@rgdigi 好点 - 必须定义和导出一些功能组件。另一个未提及的一点是，您可以在该块中执行您需要的任何逻辑，而不仅仅是检查请求参数；例如，您可以让服务器首先请求有效会话，然后根据该请求进行评估。

【解决方案2】：

如果可以的话，搜索引擎优化重定向服务器端是一个好主意（不是像上面提到的问题那样用于登录）。

但是对于诸如用户语言之类的东西，使用这样的服务器端重定向可能是个好主意。

export const getServerSideProps = async ({ req, res }) => {
if (res) {
    res.writeHead(302, { // or 301
      Location: "localized/url/product/categories",
    });
    res.end();
  }
}

更新，我最终解决了这个问题，因为我确实遇到了一些已经发送的标头问题。请让我知道如何解决这个问题，因为它不是最理想的（尽管谷歌确实根据这篇文章 https://www.seroundtable.com/google-meta-refresh-redirects-work-25335.html 理解它）

export default function HomePage({ language }) {
  return (
    <Head>
      <title>-</title>
      <meta httpEquiv="refresh" content={`0;url=/${language}/discover/0`} />
    </Head>
  );
}

更新 Nextjs 正在添加原生支持，有一个可用的 RFC：https://github.com/vercel/next.js/discussions/17078

【讨论】：

【解决方案3】：

使用 Next.JS，您需要在客户端重定向客户端。如果登录成功，请尝试返回 200 状态码，然后在成功时使用客户端路由器导航到另一个页面。这个示例应该让您了解如何以编程方式将新页面推送到路由器历史记录：

import Router from 'next/router'

() => {
  if(code==200){
    Router.push('/')
  }
}

【讨论】：

在我看来，这个答案令人困惑，并且提供的 sn-p 并没有说明太多。您可以重定向客户端和服务器端。在客户端，查看router.push or router.replaceAPIs。在服务器上，您可以通过ctx.res.writeHead(303, { Location: target }) 编写显式标头来强制301、303 或308（所有典型的重定向HTTP 状态）。
如果您在客户端使用fetch，我不确定重定向是否有效，您是否测试过这种行为？无论如何，如果您对这个答案不满意，请继续添加您自己的答案到这个问题，所以其他人不需要在另一个答案的评论中查找更好的答案。
不确定fetch 是如何出现在这里的。是的，上述方法有效。查看next-redirect 以获取示例实现。我不想添加新答案，因为本网站习惯于先评论已接受的答案 - 这也是人们通常会寻找的。span>
code var 来自哪里？从例子中看不清楚
嗯。我喜欢在服务器上使用它，因为 Next 的重点是 SEO，而且我认为 Google 不会获得客户端重定向。