如何在 next.js 中指定 HTTP 响应代码

Question

我有一个用 TypeScript 编写的 Next.js v12 应用程序。

我有一个 _error.tsx 页面，为各种错误提供自定义 UI 体验，包括 410、404 和其他错误。问题是，无论 API 错误在服务器端触发此页面的出现，客户端浏览器都会使用 500.

的 HTTP 状态代码从服务器获取此页面

我如何自定义该状态代码，例如 410 的页面实际上具有 410 的 HTTP 状态代码？

Answer 1

好吧，我设法自己找到了解决方案。

有点counter-intuitive，但要获得所需的行为，您应该直接设置进入 getInitialProps 的 res 对象的 statusCode 的值所述 _error.tsx 页。

按照这些思路：

ErrorPage.getInitialProps = ({ res, err }: NextPageContext) => {
  const statusCode =
    (err as AxiosError)?.response?.status ?? res?.statusCode ?? err?.statusCode ?? undefined;
  if (res && statusCode) {
    res.statusCode = statusCode;
  }
  const text = String(res?.statusMessage || err?.message || err);
  return { statusCode, text };
};

如何在 next.js 中指定 HTTP 响应代码

How to specify HTTP response code in next.js

typescript

reactjs

next.js