Next.js getServerSideProps 重定向 ERR_HTTP_HEADERS_SENT 错误

Question

我正在尝试使用 Next.js 制作一个私人页面。

我写了pages/private.tsx。

import React from 'react';
import { Label } from '@components/atoms';
import { Layout } from '@components/Layout';
import Link from 'next/link';
import { GetServerSideProps } from 'next';

const Private = (props: any) => {
  console.log(props);
  return (
    <Layout>
      <Link href="/">
        <a>
          <Label size="L1" margin="32px 0 0 24px" pointer>
            Go Back to Home
          </Label>
        </a>
      </Link>
    </Layout>
  );
};

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  // redirect test: always redirect to '/login'
  ctx.res.setHeader('Location', '/login');
  ctx.res.statusCode = 302;
  ctx.res.end();
  return {
    props: {},
  };
};

export default Private;

它运作良好。如果我尝试去/private，它会重定向到/login.

浏览器没问题，但我的控制台说，

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:526:11)
    at DevServer.sendHTML (Directory/node_modules/next/server/next-dev-server.ts:663:9)
    at DevServer.render (Directory/node_modules/next/next-server/server/next-server.ts:1232:17)
    at Object.fn (Directory/node_modules/next/next-server/server/next-server.ts:726:11)
    at Router.execute (Directory/node_modules/next/next-server/server/router.ts:247:24)
    at DevServer.run (Directory/node_modules/next/next-server/server/next-server.ts:1158:23)
    at DevServer.handleRequest (Directory/node_modules/next/next-server/server/next-server.ts:551:14) {
  code: 'ERR_HTTP_HEADERS_SENT'
}

我想的原因是在服务器向浏览器发送响应后，我再次尝试发送 302 状态码。

有没有办法解决这个错误？

++ 我试图在客户端制作重定向代码，但它显示私人页面一秒钟并重定向。我想阻止初始加载。

Answer 1

你可以退回这个

return {
  redirect: {
    permanent: false,
    destination: "/login",
  },
  props:{},
};

而不是设置标题。

由于 serversideprops 发送了两个响应，因此出现了该错误。一个在返回中，一个在标题中。

您可以在此处阅读有关重定向的更多信息