如何在 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 };

我已經相應地更新了沙箱。