Next.js 14中如何让自定义404页面返回正确HTTP状态码？

你遇到的问题核心是对App Router中not-found.tsx的触发逻辑理解偏差，以下是具体解决方法和最佳实践：

1. 理解not-found.tsx的触发机制 #

app/not-found.tsx是App Router的错误边界组件，默认有两种触发场景：

• 当用户访问不存在的路由时，Next.js会自动渲染该页面并返回404状态码（这是你需要的SEO友好场景）
• 如果你直接访问/not-found路径，它会返回200状态码——这是设计逻辑，因为此时它是一个合法的路由页面，而非错误兜底页

2. 主动触发404并返回正确状态码 #

在服务器组件（如page.tsx或其他Server Component）中，当检测到资源不存在时，调用next/navigation提供的notFound()函数，Next.js会自动渲染not-found.tsx并返回404状态码：

import { notFound } from 'next/navigation';

export default async function ProductPage({ params }: { params: { id: string } }) {
  // 模拟获取数据
  const product = await fetch(`https://api.example.com/products/${params.id}`).then(res => res.json());
  
  if (!product || product.error) {
    notFound(); // 触发404，自动渲染not-found.tsx并返回404状态码
  }

  return <div>产品详情：{product.name}</div>;
}

3. 全局404页面的正确配置 #

确保not-found.tsx放在app根目录下，这样所有未匹配的路由都会触发它并返回404状态码。如果需要为特定子路由设置独立的404页面，可以在对应子目录下创建not-found.tsx（比如app/products/not-found.tsx），它只会处理/products/*下的未匹配路由。

4. SEO与用户体验优化实践 #

• 添加元数据：在not-found.tsx中配置页面元数据，帮助搜索引擎识别404页面：

  import { Metadata } from 'next';
  
  export const metadata: Metadata = {
    title: '404 - 页面未找到',
    description: '您访问的页面可能已被移除、名称已更改或暂时不可用，请返回首页继续浏览。',
  };
  
  export default function NotFound() {
    return (
      <div style={{ padding: '2rem', textAlign: 'center' }}>
        <h1>404 - 页面未找到</h1>
        <p>您访问的页面可能已被移除、名称已更改或暂时不可用。</p>
        <a href="/">返回首页</a>
      </div>
    );
  }
  

• 提供清晰的导航：在404页面添加返回首页或常用页面的链接，降低用户流失率
• 避免使用客户端跳转：确保404状态码由服务器返回，不要用客户端路由跳转模拟404，否则会导致状态码异常

总结：App Router中不需要手动设置HTTP状态码，通过notFound()函数触发或自动匹配未存在路由时，Next.js会自动处理404状态码，直接访问/not-found返回200是正常设计，不影响SEO（因为用户不会通过搜索引擎访问这个路径）。

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