Next.js notFound() 未设置 404 HTTP 标头

Question

选择Nextjs的目的是为了SSR和SEO。我们有一个外部 REST API，我们可以在前端查询数据。但在某些页面上，我们需要进行预渲染获取，并在 API 返回 404 时显示正确的 404 Not Found 标头。这对我来说似乎很困难。

应用程序结构如下所示：

app/p/auth/
├── layout.jsx
├── loading.jsx
├── password-reset
│   └── [key]
│       ├── components
│       │   ├── index.js
│       │   ├── ResetPassword.jsx
│       │   └── SecurityQuestions.jsx
│       ├── page.jsx
│       └── ResolveComponent.jsx
├── reset-successful
│   └── page.jsx
└── sign-up
    └── page.jsx

我的问题

正在向 http://example.com/p/auth/password-reset/[key] 发出请求。密钥将被捕获并发送到 REST API 进行验证。如果找不到，并且抛出

notFound()

，它应该返回正确的 404 HTTP 响应。

我尝试过的

根据我的尝试，返回正确的 404 标头的唯一方法是在

notFound()

中抛出

app/p/auth/layout.jsx

，但问题是，布局在其他路径之间共享（例如 app/p/auth/sign -up），并且我无法隔离

app/p/auth/layout.jsx

中的请求

我尝试通过删除

layout.jsx

并在每个路径中重新创建一个来隔离

app/p/auth/layout.jsx

，但是将

notFound()

扔进

app/p/auth/password-reset/[key]/layout.jsx

中不会设置 404 HTTP 标头。它返回 200 并进一步加载到 404 页面。

notFound()

在

app/p/auth/layout.jsx

中调用时设置404标题，但是当将布局隔离到像

app/p/auth/password-reset/[key]/layout.jsx

这样的子文件夹时，它不会设置404标题，但会加载带有200标题的404页面。处理这个问题的正确方法是什么？

Answer 1

此处提到的解决方案是显式设置状态代码，方法是：

在 middleware.tsx 中对 /404 路径名进行条件检查并设置 404 状态
创建/app/404/page.tsx（如果需要）

你的中间件看起来像这样：

export function middleware(req) {
const url = req.nextUrl;

if (url.pathname === '/404') {
   return  NextResponse.next({
   status: 404,
  });
 }
 return NextResponse.next();
}