Next.js中notFound()无法在子路由设置404 HTTP Header的问题

正确处理方式 #

直接在app/p/auth/password-reset/[key]/page.jsx这个服务器组件里完成key的API验证，验证失败就抛出notFound()——这是Next.js App Router里保证路由隔离且返回正确404状态码的标准做法。

具体实现 #

1. 从路由参数中获取key
2. 调用外部REST API验证该key的有效性
3. 若API返回404或验证不通过，直接抛出notFound()
4. 验证通过后再渲染页面内容

代码示例 #

// app/p/auth/password-reset/[key]/page.jsx
import { notFound } from 'next/navigation';
import ResetPassword from './components/ResetPassword';

// 默认是服务器组件，无需添加'use client'指令
export default async function PasswordResetPage({ params }) {
  const { key } = params;

  try {
    const apiRes = await fetch(`https://你的API地址/verify-reset-key/${key}`, {
      method: 'GET',
      // 如需缓存验证结果，可添加配置：next: { revalidate: 60 }（60秒重新验证一次）
    });

    // 检查API响应状态
    if (!apiRes.ok) {
      if (apiRes.status === 404) {
        // 验证失败，抛出notFound自动返回404响应头及对应页面
        notFound();
      }
      // 处理其他错误（如500），可根据需求抛出错误或跳转至自定义错误页
      throw new Error('验证请求失败');
    }

    const validData = await apiRes.json();

    // 验证通过，渲染重置密码页面
    return <ResetPassword data={validData} />;
  } catch (err) {
    // 捕获网络等异常，同样返回404
    notFound();
  }
}

为什么之前的方案无效？ #

• 父布局app/p/auth/layout.jsx中抛出notFound()：该布局被sign-up等其他路由共享，会导致所有子路由被错误拦截，无法实现路由隔离。
• 子布局中抛出notFound()：Next.js的布局组件仅负责嵌套渲染结构，它抛出的notFound()只会显示404页面，但不会修改HTTP响应状态码——状态码由页面组件（page.jsx）决定，因此会出现200状态码搭配404页面的问题。

额外提醒 #

• 不要给该page.jsx添加'use client'，notFound()仅能在服务器组件或服务器端函数中调用。
• 若需客户端交互（如输入新密码），可将交互部分拆分为客户端组件，服务器组件仅负责验证和传递必要数据，既安全又符合Next.js架构设计。

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