Next.js路由异常：访问about页面出现404错误求助

可能的原因及修复方法 #

• 组件导出方式错误
  确保about.tsx中是默认导出React组件，而非命名导出。错误示例：

  export function About() {
    return <div>About Page</div>;
  }
  

  正确写法：

  export default function About() {
    return <div>About Page</div>;
  }
  

• Next.js路由模式冲突（13+版本）
  若使用Next.js 13+，检查next.config.js是否启用了App Router（experimental.appDir: true）：

  • 若要继续使用Pages Router：删除该配置项，重启开发服务器；
  • 若切换到App Router：将about.tsx移至app/about/page.tsx目录下（需确保app目录存在）。

• 开发服务器未重启
  新增页面后，开发服务器可能未自动识别，执行npm run dev或yarn dev重启服务，再访问localhost:3000/about。

• 文件命名或路径问题

  • 确保文件名是about.tsx（小写，避免Linux/macOS文件系统大小写敏感导致匹配失败）；
  • 确认pages目录位于项目根目录或src/pages（Next.js默认支持src目录结构），不能嵌套在其他子文件夹中。

• 路由规则冲突
  检查pages目录下是否存在动态路由（如[slug].tsx）或自定义路由配置，静态路由/about优先级高于动态路由，但如果动态路由逻辑有误可能导致拦截，可暂时移除动态路由测试是否恢复正常。

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