有沒有辦法讓我使用 Next.js api 路由發送 404 頁面

Question

基本上，我有一個 API 路由/api/signin.js 。 我想接受發布請求並在收到獲取請求時返回 404 頁面。 我還沒有找到任何方法來返回 404 頁面而不執行重定向之類的操作。 任何幫助，將不勝感激。 謝謝你。

export default async function Signin(req, res) {
    // /////////////////////////////////////////////////////// //
    // Here is where I want to send the 404 custom 404.js page //
    // /////////////////////////////////////////////////////// //
    if(req.method === "GET") {
        return res.status(404).send();
    }
    
    if(req.method !== "POST") {
        return res.status(404).send();
    }

    try {
        const { cookies, body } = req;
        console.log(req.cookies);

        // Signin logic...
        
    } catch (err) {
        res.status(500).json({ err: "Internal server error" });
    }
}

Answer 1

作為一種解決方法，您可以使用 ReactDOMServer 的renderToString function

將 React 元素渲染為其初始 HTML。 React 將返回一個 HTML 字符串。 您可以使用此方法在服務器上生成 HTML 並在初始請求時發送標記以加快頁面加載速度並允許搜索引擎抓取您的頁面以用於 SEO 目的。

或 ReactDOMServer 的renderToStaticMarkup function

與 renderToString 類似，但它不會創建 React 內部使用的額外 DOM 屬性，例如 data-reactroot。 如果您想將 React 用作簡單的 static 頁面生成器，這很有用，因為剝離額外的屬性可以節省一些字節。

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}

// pages/api/signin.js
import ReactDOMServer from "react-dom/server";
import NotFound from "../404"; // import your 404 page

export default function Signin(req, res) {
  if (req.method === "GET") {
    return res
      .status(404)
      .send(ReactDOMServer.renderToStaticMarkup(<NotFound />));
  }

  if (req.method !== "POST") {
    return res.status(404).send();
  }

  try {
    const { cookies, body } = req;
    console.log(req.cookies);

    // Signin logic...
  } catch (err) {
    res.status(500).json({ err: "Internal server error" });
  }
}

這樣，您可以發送404狀態代碼並返回 html 表示，而無需重定向。