Next.js中未认证用户访问API路由如何返回与默认一致的404响应

解决方法 #

你只需要补全和Next.js默认404响应一致的响应头，同时返回内置404页面的内容即可，修改后的代码如下：

// api/test.js
import { getSession } from 'next-auth/client'
import fs from 'fs/promises'
import path from 'path'

export default async (req, res) => {  
    const session = await getSession({ req });

    if (session) {
        // 已登录场景直接返回会话信息
        return res.status(200).json(session);
    }

    // 未认证场景伪装成404
    res.status(404);
    // 补全和默认404完全一致的响应头
    res.setHeader('Cache-Control', 'no-store, must-revalidate');
    res.setHeader('X-Powered-By', 'Next.js');
    res.setHeader('Content-Type', 'text/html; charset=utf-8');

    // 读取Next.js内置404页面内容返回
    const fourOhFourPath = path.join(process.cwd(), '.next', 'server', 'pages', '404.html');
    try {
        const pageContent = await fs.readFile(fourOhFourPath, 'utf8');
        res.setHeader('Content-Length', Buffer.byteLength(pageContent));
        res.write(pageContent);
    } catch (err) {
        // 开发环境适配：未提前打包404静态文件时直接渲染动态404页
        res.render('404');
    }

    res.end();
}

原逻辑问题说明 #

你之前的代码仅设置了404状态码就直接结束响应，没有返回任何内容所以显示空白，同时缺失了默认404的标准响应头，因此和访问不存在路由的返回结果存在差异。
上述修改同时兼容开发环境和生产环境，最终返回的响应头、响应体都和Next.js默认404完全一致，外部无法区分是路由不存在还是权限被拦截。

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