NextJS动态路由在本地主机失效，访问/user/[username]返回404错误

你遇到的404问题，核心是混淆了Next.js的Pages Router和App Router路由规则：你参考的是Pages Router的动态路由文档，但文件放在了src/app目录下（这是App Router的目录结构），两者的路由规则完全不同。

两种解决路径： #

路径1：改用Pages Router规则 #

把你的[username].js文件移动到src/pages/user/目录下（如果pages目录不存在就新建），原代码可以直接使用——因为useRouter是Pages Router的钩子，调整后访问localhost:3000/user/john就能正常匹配。

路径2：遵循App Router规则（Next.js 13+） #

App Router的动态路由依赖文件夹结构，需要按以下步骤调整：

1. 在src/app/user/下创建[username]文件夹
2. 在该文件夹内新建page.js文件，替换原来的[username].js
3. 代码改用useParams钩子（App Router的专属API），示例代码：

import { useParams } from 'next/navigation';

export default function User() {
  const params = useParams();
  return <p>{params.username}</p>;
}

调整后访问localhost:3000/user/john即可正常显示内容。

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