Next.js React应用路由异常：详情页出现404错误求助

问题核心原因 #

你的详情页代码存在致命错误：导出组件时直接调用了组件函数，导致Next.js无法识别这是一个合法的页面组件。

修复步骤 #

1. 修正组件导出方式
   原代码最后一行是export default detail();，这会导出组件执行后的JSX结果，而非组件本身。修改为导出函数引用：

   const Detail = () => {
       return(
           <h1>Detail side</h1>
       )
   }
   
   export default Detail;
   

   （组件名改为大驼峰是React官方推荐规范，便于区分普通函数和组件）

2. 确认路由路径匹配
   从你的项目目录结构来看，pages目录下的detail-page.js对应路由路径/detail-page，确保你访问的URL是http://localhost:3000/detail-page（开发环境下），路径和文件名完全一致。

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