如何通过Next.js API路由无需重定向返回自定义404页面

解决方案 #

你可以直接在API路由中渲染自定义404组件的HTML内容，设置404状态码后返回，不需要重定向，地址栏路径不会发生变化。

实现步骤 #

1. 引入React服务端渲染工具和你项目内的自定义404组件
2. 拦截非POST请求，将404组件渲染为HTML字符串
3. 设置响应头的内容类型为text/html，携带404状态码返回HTML内容

完整修改后代码 #

import { renderToString } from 'react-dom/server';
// 路径根据你项目中404.js的实际位置调整，示例是404.js在pages目录下，当前API路由在pages/api目录下
import Custom404 from '../404';

export default async function Signin(req, res) {
    // 拦截所有非POST请求
    if(req.method !== "POST") {
        // 将404组件渲染为HTML字符串
        const pageHtml = renderToString(<Custom404 />);
        // 设置响应头为HTML类型
        res.setHeader('Content-Type', 'text/html');
        // 返回404状态码和完整的页面HTML
        return res.status(404).send(`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 页面不存在</title>
  <!-- 此处可添加你项目的全局样式引入代码，保证404页面样式正常 -->
</head>
<body>
  ${pageHtml}
</body>
</html>
        `);
    }

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

        // 登录逻辑...
        
    } catch (err) {
        res.status(500).json({ err: "服务器内部错误" });
    }
}

注意事项 #

• 若你使用React 18，可以用renderToPipeableStream替代renderToString获得更好的性能
• 若404组件依赖全局布局、状态管理Provider，渲染时需要将对应的Provider包裹在Custom404外层，避免样式或功能异常
• 若使用Next.js App Router，只需将引入的404组件替换为app/not-found.js对应的组件即可，逻辑保持一致

内容的提问来源于stack exchange，提问作者Ojani