Next.js动态路由介绍（[projectId]/page.tsx：动态路由参数、参数占位符、动态参数、动态数据）无需预创建目录、共享页面逻辑

示例结构：

示例结构：

app/
└── projects/└── [projectId]/    # 这个不是要创建的目录，而是表示动态参数└── page.tsx      # 所有/projects/xxx都会使用这个文件

问：[projectId]是什么？

在Next.js中，[projectId]/表示一个动态路由参数，不需要事先创建任何目录，而是由Next.js在运行时动态处理的。

具体解释：

1. 不是目录，而是参数占位符：

• [projectId] 不是实际要创建的目录名
• 它表示这个位置可以匹配任何字符串，如/projects/123、/projects/abc、/projects/my-project
• Next.js会自动将123、abc、my-project等作为projectId的值传递给页面组件

2. 实际文件结构：

app/
└── projects/└── [projectId]/    # 这个不是要创建的目录，而是表示动态参数└── page.tsx      # 所有/projects/xxx都会使用这个文件

3. 访问示例：

• 访问/projects/123 → Next.js会将123作为projectId参数传递给page.tsx
• 访问/projects/my-project → Next.js会将my-project作为projectId参数传递

4. 页面组件如何获取参数：

// app/projects/[projectId]/page.tsx
export default function ProjectDetail({ params }: { params: { projectId: string } }) {// params.projectId 会是 '123' 或 'my-project' 等return <div>Project ID: {params.projectId}</div>
}

为什么这样设计？

- 无需预创建目录：你不需要为每个可能的项目ID创建单独的文件夹

- 自动路由处理：Next.js会自动将所有/projects/xxx的请求映射到同一个page.tsx文件

- 简单高效：只需一个文件就能处理所有动态路由，大大减少了文件数量

与React Router的对比

在React Router v6中，你需要在配置文件中显式定义：

{ path: '/projects/:projectId', element: <ProjectDetail /> }

而在Next.js中，你不需要任何配置，只需在文件系统中创建正确的文件结构，Next.js会自动处理所有匹配的URL。

重要提示

• 不要创建名为[projectId]的目录（这在文件系统中是无效的）
• 不要创建projects/123/page.tsx这样的文件（Next.js会自动处理所有动态路径）
• 只需创建app/projects/[projectId]/page.tsx，Next.js会自动处理所有/projects/开头的路径

这就是Next.js"文件系统驱动路由"的核心优势：你不需要编写任何路由配置，只需按照约定创建文件结构，Next.js会自动将文件映射到URL。

问：这样做有何意义，都是使用page.tsx，难道所有页面都用相同代码渲染吗？

✅ 核心意义：动态参数 vs 静态文件

1. 不是"所有页面都相同代码"，而是"相同结构处理不同数据"

在Next.js中，[projectId]/page.tsx 不是表示"所有项目都用同一个文件"，而是表示"所有项目ID的页面都使用同一个文件处理逻辑，但根据传入的projectId参数渲染不同的内容"。

举个例子：

• 访问/projects/1 → page.tsx接收{ projectId: '1' }
• 访问/projects/2 → page.tsx接收{ projectId: '2' }
• 访问/projects/abc → page.tsx接收{ projectId: 'abc' }

在page.tsx中，我们会根据传入的projectId参数去获取对应的数据，而不是使用"相同的代码"。

---

🧠 为什么这样设计？（实际代码示例）

// app/projects/[projectId]/page.tsx
import { notFound } from 'next/navigation'export default function ProjectDetail({ params }: { params: { projectId: string } }) {// 1. 根据projectId参数获取数据（可以是API调用、数据库查询等）const project = getProjectById(params.projectId) // 这里是动态获取数据// 2. 如果项目不存在，触发404if (!project) {notFound()}return (<div><h1>{project.title}</h1><p>{project.description}</p>{/* 根据不同projectId显示不同内容 */}</div>)
}

---

🌟 与传统方式的对比

方式	代码结构	维护难度	适用场景
Next.js动态路由	app/projects/[projectId]/page.tsx	✅ 低（只需一个文件）	项目ID不确定，数量庞大
传统静态路由	app/projects/1/page.tsx app/projects/2/page.tsx app/projects/abc/page.tsx	❌ 高（需创建无数文件）	项目ID已知且数量极少

---

💡 为什么这样设计更好？

1. 无需预创建目录：

• 不需要为每个项目ID提前创建文件夹
• 无需在代码中硬编码所有可能的ID

2. 自动参数传递：

• Next.js会自动将URL中的动态部分（如123）作为参数传递给页面组件
• 你不需要手动解析URL

3. 减少重复代码：

• 所有项目详情页共享相同的页面逻辑
• 只需维护一个page.tsx文件，而不是成百上千个

4. 符合实际业务场景：

• 在真实应用中，项目ID是动态生成的（数据库主键）
• 无法预先知道所有可能的ID

---

📌 重要澄清：不是"相同代码"，而是"相同结构+动态数据"

• 相同结构：页面的HTML结构、UI组件、布局是相同的
• 动态数据：根据传入的projectId参数，从API或数据库获取不同的数据

这就像一个"模板"：

[projectId] → 传入的ID → 获取对应数据 → 渲染页面

---

📚 从知识库中找依据

从知识库中可以看到：

“动态路由获取 URL 参数，使用服务器组件在服务器端获取数据”

除外还可以看到：

“将文件夹的名字用方括号括住，比如[id]、[slug]。这个路由的名字会作为param prop传给布局（layout）、页面（page）…”

---

✅ 总结

• 不是所有页面都用相同的代码，而是使用相同的页面结构处理不同数据
• 动态路由的意义：用一个文件处理无限可能的URL路径，避免创建大量重复文件
• 实际应用：在真实项目中，项目ID是动态生成的，不可能预先创建所有文件

所以，[projectId]/page.tsx不是"所有页面都一样"，而是"同一个页面文件根据URL参数动态渲染不同内容"，这是Next.js动态路由的核心价值所在。