Next.js 14 App Router动态路由出现404错误求助

核心问题分析 #

• 动态路由文件夹命名不符合规范：Next.js App Router的动态路由要求文件夹名必须是[参数名]格式，你当前的代码路径app/(common)/product/categoryProduct[id]无法被识别为动态路由，这是导致404的直接原因。
• 组件参数与路由参数不匹配：
  • 动态路由若使用[id]作为参数名，组件接收的params应该是id，但你写的是slug: string，参数名不对应。
  • 非动态路由categoryProduct本身没有动态参数，你却在组件里声明接收id: number，属于错误写法。

修正步骤 #

1. 调整文件夹结构
   按照App Router规范重新组织动态路由目录，正确结构如下：

   app/(common)/product/
   ├── categoryProduct/          # 对应非动态路由 localhost:3000/product/categoryProduct
   │   └── page.tsx
   └── categoryProduct/
       └── [id]/                 # 对应动态路由 localhost:3000/product/categoryProduct/a
           └── page.tsx
   

2. 修正Page组件代码

   • 动态路由[id]/page.tsx代码：

     export default function Page({ params }: { params: { id: string } }) {
       return <h1>My Page: {params.id}</h1>;
     }
     

   • 非动态路由categoryProduct/page.tsx代码：

     export default function Page() {
       return <div>My Post List</div>;
     }
     

3. 验证访问
   重启Next.js开发服务器后，访问localhost:3000/product/categoryProduct/a即可正常加载页面。

内容的提问来源于stack exchange，提问作者Chris Hunter-Johnson