Next.js动态路由实现疑问：命名规则及代码报错问题求助

核心问题：你搞混了两套路由体系 #

Next.js目前有两套独立的路由系统，动态路由的实现逻辑完全不一样：

• Pages Router：基于pages文件夹的旧版路由，兼容Next.js全版本，12及更早版本默认用这套
• App Router：基于app文件夹的新版路由，Next.js 13+项目默认启用

不同体系的动态路由写法 #

1. Pages Router 写法 #

• 动态路由靠命名文件实现：在pages目录下创建[id].js/tsx文件，比如pages/post/[id].js，对应访问路由/post/123
• 也可以用动态文件夹+index文件：比如pages/post/[id]/index.js，效果和上面完全一致
• 获取路由参数：用next/router的useRouter，你的代码其实是对应这套体系的，但如果你的项目用的是App Router，必然报错

2. App Router 写法 #

• 动态路由靠命名文件夹实现：在app目录下创建[id]文件夹，里面必须放page.js/tsx文件，比如app/post/[id]/page.js，对应访问路由/post/123
• 获取路由参数：不能用next/router的useRouter，有两种更合适的方式：
  • 直接在page.js组件的props里接收params（推荐，默认是服务器组件，无需加"use client"）
  • 客户端组件里用next/navigation的useParams

你的代码报错原因及修复 #

如果你的项目是App Router（现在新建项目默认是这个），你的代码有两个致命问题：

1. 导入的useRouter来自next/router，这是Pages Router的专属API，App Router不认
2. App Router的useRouter没有query对象，没法用router.query.id拿参数

修复方案（App Router） #

方案1：直接接收params（最推荐）

// app/[id]/page.js
export default function ID({ params }) {
  return <div>{params.id}</div>;
}

这个组件默认是服务器组件，不需要加"use client"，性能更好。

方案2：客户端组件用useParams

"use client"
import { useParams } from 'next/navigation';

const ID = () => {
  const params = useParams();
  return <div>{params.id}</div>;
};

export default ID;

如果你的项目是Pages Router，那你的代码本身没问题，但要确保文件路径是pages/[id].js或者pages/xxx/[id].js，如果还是报错，检查下Next.js版本是否过低，或者路由是否正确匹配。

一句话总结 #

• Pages Router：动态路由用[id].js文件，拿参数用next/router的useRouter().query.id
• App Router：动态路由用[id]文件夹+page.js，拿参数要么直接接params，要么客户端用useParams

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