Next.js App Router动态路由错误路径返回404实现方法求助

你的核心问题是用客户端组件+SWR在前端做跳转，导致HTTP状态码始终是200。要让错误路由返回标准的404状态码，得用服务器组件在服务端处理数据校验，具体步骤和代码如下：

1. 改造page.js为服务器组件（核心） #

App Router默认就是服务器组件，去掉'use client'标记，直接在服务端完成数据获取和404判断，这样Next.js会自动返回对应的HTTP状态码。

修改后的app/works/[slug]/page.js代码：

import axios from 'axios';
import { notFound } from 'next/navigation';

export default async function SingleWork({ params }) {
  const { slug } = params;

  try {
    // 服务端请求Strapi API
    const res = await axios.get(
      `http://localhost:1337/api/works?filters[slug][$eq]=${slug}&populate=*`
    );
    const data = res.data.data;

    // 如果没有匹配到数据，触发404
    if (!data || data.length === 0) {
      notFound();
    }

    // 正常返回内容
    return <div>My Post: {JSON.stringify(data[0])}</div>;
  } catch (error) {
    // 处理API请求失败的情况（比如Strapi宕机）
    console.error('Failed to fetch work:', error);
    notFound();
  }
}

2. 关键改动说明 #

• 移除客户端标记：去掉'use client'，让组件在服务器端运行，数据请求和校验都在服务端完成
• 用异步组件获取数据：服务器组件支持直接写async/await，不需要SWR这类客户端数据缓存库（如果需要缓存，可以用Next.js的fetch自带缓存策略，或者unstable_cache）
• 调用notFound()：当没有匹配的slug时，调用这个函数，Next.js会自动返回404 HTTP状态码，并渲染自定义的404页面

3. 自定义404页面 #

在app目录下创建404.js，就能自定义404页面内容：

export default function NotFound() {
  return <div>抱歉，你访问的作品不存在</div>;
}

为什么之前的方法有弊端？ #

你之前用router.push("/404")是客户端路由跳转，本质上HTTP请求已经返回了200状态码，只是前端页面跳转到404，这会导致：

• SEO不友好，搜索引擎会认为这个路由是有效的
• 用户可以通过查看页面源码或网络请求看到原本的空数据响应
• 不符合HTTP协议规范

用服务器组件的方式，服务端直接返回404状态码，完全符合标准，也解决了上述问题。

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