Learn Next.js教程中动态路由返回404问题求助

问题概述 #

学习Next.js官方Dashboard教程时，创建发票编辑页面环节遇到404错误：访问http://localhost:3000/dashboard/invoices/[发票ID]/edit时显示「404 - Page not found」，但发票列表页正常，编辑按钮的链接显示正确，且已排查过动态路由文件夹命名问题。

排查步骤 #

1. 确认App Router文件结构完全符合要求 #

最新版Next.js采用App Router，编辑页的正确文件路径应为：

app/
└── dashboard/
    └── invoices/
        └── [id]/
            └── edit/
                └── page.tsx （或page.jsx）

• 必须确保edit文件夹直接嵌套在[id]动态路由文件夹内
• edit文件夹下必须存在page.tsx（核心路由入口文件）

2. 检查动态路由文件夹命名规范 #

• 动态路由文件夹名必须是[id]，不能包含空格或多余符号（比如[ id ]带空格会导致路由匹配失效）
• 确认文件夹名的括号是英文半角括号，不是全角符号

3. 验证page.tsx的导出规则 #

edit/page.tsx必须默认导出React组件，不能使用命名导出：

// 正确写法
export default function EditInvoice() {
  return <div>编辑发票页面</div>;
}

// 错误写法（不会被识别为路由页面）
export function EditInvoice() { ... }

4. 重启Next.js开发服务器 #

修改文件结构后，开发服务器可能未自动更新，手动停止后重新启动：

npm run dev
# 或
yarn dev

5. 排查自定义路由规则干扰 #

检查next.config.js文件，确认没有配置rewrites、redirects或trailingSlash等规则干扰该路由的匹配。例如避免此类可能冲突的配置：

module.exports = {
  trailingSlash: true, // 可能导致路由匹配异常
  rewrites: async () => [
    // 检查是否有重写规则覆盖了/invoices/[id]/edit路径
  ],
};

6. 测试最简路由页面 #

在[id]/edit/page.tsx中创建最简测试组件，排除组件代码自身的问题：

export default function TestEditPage() {
  return <h1>测试编辑页面</h1>;
}

重启服务器后访问对应链接，若仍404则聚焦文件结构问题；若能正常显示则排查原组件代码。

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