有没有办法让我使用 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 表示，而无需重定向。