如何在 Next.js 中为 404 页设置状态代码 404 而不是 200

Question

我询问了在 Next.js 中将 404 状态码设置为 404-page 的方法，但得到的答复是这不是真的，状态码默认为 404。 我无法在评论中展示打印屏幕，所以我想在这里展示它们，并可能得到我想要的答案。 事实是，所有错误请求的状态代码都是 404，但 404 页面本身的状态代码是 200 如您所见，前两个位置的状态代码为 200。每次 url 与我的页面目录中的页面不匹配时，我想触发 404，但返回状态代码为 404 而不是 200。或者如果这是可能我更愿意将状态代码 301 重定向到第 404 页，重定向后的 url 为例如。 /404?url=%2Fbadrequest。 请你至少指出我的方向。 我不知道应该在客户端还是服务器端完成。 我想我需要对服务器端做出反应来设置正确的响应代码，但是如何呢？ 并重定向和建立一个像 /404?url=%2Fbadrequest 这样的 url 是否必须在客户端或服务器端完成？

非常感谢

Answer 1

您所指的前两个请求是 script 和 fetch/XHR 请求，而不是页面（请参阅Type ，它将是页面的document ；或者您可以在过滤器中选择“Doc”）。 该页面 ( /badrequest ) 在您图像的最后一个请求中被请求（并以404状态代码响应）。 那些 JS 文件只是用来渲染404错误组件。

对于重定向部分，您可以执行以下操作：

// pages/[...slug.js]

const Fake = () => <></>;
export default Fake;

const getServerSideProps = async ({ req }) => {
  return {
    redirect: {
      destination: `/404?url=${encodeURI(req.url)}`,
      permanent: true
    }
  };
};

export { getServerSideProps };

// pages/404.js

import { useRouter } from "next/router";
import { useEffect, useState } from "react";

const ErrorPage = () => {
  const { asPath: path } = useRouter();
  const [currentPath, setCurrentPath] = useState("");

  useEffect(() => {
    setCurrentPath(
      decodeURI(
        new URLSearchParams(path.replace(/^.*?\?/, "")).get("url") || ""
      )
    );
  }, [path]);

  return <div>{currentPath} Not Found</div>;
};

export default ErrorPage;

结果：

代码沙盒： codesandbox.io/s/bitter-glade-btrcp

---

PS：状态码308表示“永久重定向”

如果您想要301状态代码， pages/[...slug.js]更改为：

const Fake = () => <></>;
export default Fake;

const getServerSideProps = async ({ req, res }) => {
  res.writeHead(301, { location: `/404?url=${encodeURI(req.url)}` }).end();
  return { props: {} };
};

export { getServerSideProps };

我已经相应地更新了沙箱。