一把梭之NextJs

File Router - 文件路由

🧠 什么是 File Router？

File Router 是指：文件结构就是路由结构。

你不需要手动配置路由（不像 React-Router 那样写一堆 <Route>），只需要把页面组件放到 app/ 或 pages/ 目录下，Next.js 就会自动把它注册成 URL 路由。

---

📁 App Router 模式（app/ 目录）

从 Next.js 13 起，推荐使用 app/ 目录，支持更强大的功能，比如：

• Layout 嵌套
• 服务端组件（Server Component）
• 并发和加载状态
• 共享模板（layout.tsx、template.tsx）
• 等等…

---

🔗 文件结构 = 路由结构（核心）

假设你有这个项目结构：

/app
  ├── layout.tsx
  ├── page.tsx               // 对应 "/"
  ├── about
  │    └── page.tsx          // 对应 "/about"
  ├── blog
  │    ├── page.tsx          // 对应 "/blog"
  │    └── [slug]
  │         └── page.tsx     // 对应 "/blog/xxx"

👉 上面这些文件和路径会自动生成这些路由：

文件路径	访问地址
app/page.tsx	/
app/about/page.tsx	/about
app/blog/page.tsx	/blog
app/blog/[slug]/page.tsx	/blog/123、/blog/abc 等动态路由

---

🔁 动态路由（Dynamic Routes）

如果你想让路由接受参数，只需要用 [] 括起来参数名：

app/products/[id]/page.tsx

访问 /products/123 时，组件中就可以用 params.id 读取这个参数。

// app/products/[id]/page.tsx
export default function ProductPage({ params }) {
  return <div>Product ID: {params.id}</div>
}

---

📦 Layout 和 Page 的区别

文件名	用途
layout.tsx	可复用的界面结构（如导航栏、侧边栏）
page.tsx	实际的页面内容（路由终点）

你可以有嵌套的 layout，例如：

/app
  ├── layout.tsx           // 全局 Layout
  └── dashboard
        ├── layout.tsx     // Dashboard 专属 Layout
        └── page.tsx       // /dashboard 页面

---

🧪 特殊文件名

文件	功能
page.tsx	页面组件，对应具体路由
layout.tsx	共享布局（每层目录可以有自己的 Layout）
loading.tsx	页面加载时展示的 loading 动画
error.tsx	页面加载失败时的错误处理
not-found.tsx	404 页面

---

✅ 小总结

特性	简介
✅ 文件结构就是路由	不用写路由表，目录结构天然决定路径
✅ 动态路由	[param] 形式接收参数
✅ 支持嵌套路由	子目录即子页面，自然嵌套
✅ Layout 可共享页面结构	layout.tsx 非常适合放导航栏、头部等
✅ 支持 loading、error、not-found	内建页面状态管理支持