reactjs - Next.js getServerSideProps 重定向 ERR_HTTP_HEADERS_SENT 错误

Question

我正在尝试使用 Next.js 创建一个私有(private)页面。
我写了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 状态码。
有没有办法解决这个错误？
++ 我尝试在客户端制作重定向代码，但它会显示私有(private)页面一秒钟并重定向。我想阻止初始加载。

Answer 1

你可以退回这个

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

而不是设置标题。
该错误是由于 serversideprops 发送的两个响应而到达的。一个在返回，一个在标题中。
您可以阅读有关重定向的更多信息 here