Next.js 13 App Router动态路由404页面无法正常显示求助

问题原因 #

你在客户端组件的useEffect中调用notFound()会触发报错，因为notFound()方法原本设计用于服务器组件或路由处理器中，在浏览器端直接调用无法正确触发Next.js的404页面逻辑，反而会抛出NEXT_NOT_FOUND错误。

解决方案 #

将页面组件改为服务器组件（App Router中默认就是服务器组件，只要不使用客户端特有的API如useState、useEffect即可），直接在服务器端完成数据获取和错误判断，这样能正确触发404页面：

import { notFound } from "next/navigation";
import ProfileInfo from "@/components/ProfileInfo";

type UniversityProps = {
  params: {
    id: string;
  };
};

// 服务器组件支持async/await直接获取数据
const University = async ({ params }: UniversityProps) => {
  const { id } = params;

  try {
    const response = await fetch(`/api/profile/university/${id}`, {
      next: { revalidate: 60 } // 可选：添加缓存策略，优化性能
    });
    
    if (!response.ok) {
      notFound(); // 服务器端调用，正确触发404
    }

    const university = await response.json();
    return (
      <>
        <ProfileInfo />
        <div className="py-8 max-w-7xl mx-auto">{university.name}</div>
      </>
    );
  } catch (error) {
    notFound(); // 捕获网络等错误，也触发404
  }
};

export default University;

关键修改点 #

• 移除useState和useEffect：服务器组件不需要客户端状态管理，直接在组件顶层异步获取数据
• 组件改为async函数：服务器组件支持异步执行，无需依赖副作用钩子
• 在服务器端调用notFound()：直接触发Next.js的404页面渲染，不会抛出客户端错误
• 可选添加缓存策略：通过fetch的next.revalidate配置，避免重复请求，提升性能

额外说明 #

如果你的ProfileInfo是客户端组件（比如使用了useState等客户端API），不需要做任何修改，服务器组件可以直接导入并渲染客户端组件，Next.js会自动处理两者的交互。

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