App Router 与 `/app` 目录结构 & 布局系统的奇妙冒险 🏰

引子 ✨

在 React 与 Next.js 的江湖里，/app 目录就像一座新兴的城市。

它不再是老旧的 /pages 村，而是一座拥有地铁、环线和分区的现代都市。

而 layout.tsx 呢？它是这座城市的"城市规划师"，负责决定每个区域的公共设施：路灯要不要亮，垃圾桶放哪儿，甚至决定所有页面是不是都要有同一条导航栏。

今天我们就来一次"城市规划科学之旅"，从底层原理聊到写代码的手感，再加点幽默调料。👷‍♂️

`/app` 目录：模块化的大都会 🏙️

在 Next.js 13+ 的 App Router 模式下，/app 目录取代了 /pages，带来了更强的模块化和布局控制。

目录结构长啥样？

bash 复制代码

/app
  ├── layout.tsx
  ├── page.tsx
  ├── dashboard
  │    ├── layout.tsx
  │    └── page.tsx
  └── settings
       └── page.tsx

page.tsx：页面入口，就像一栋大楼的门口。🚪
layout.tsx：布局文件，决定这栋楼的公共走廊、楼梯间。🛗
子目录（如 dashboard、settings）：独立社区，可以有自己的小区布局。🏘️

`layout.tsx`：公共设施的灵魂架构师 🏗️

在 /app 体系里，layout.tsx 的存在很像操作系统里的内核。

它不会直接办事（不画 UI 元素），但它规定了 所有页面必须遵守的公共约定。

一个例子：

javascript 复制代码

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>🌐 我是全站导航栏</header>
        <main>{children}</main>
        <footer>© 2025 --- 由 AI 友情提示：早点休息 🛌</footer>
      </body>
    </html>
  );
}

这里的 children 就像 Linux 里的进程调度：

系统提供一个统一的"舞台"
各个子页面在舞台上各显神通

层层嵌套：像套娃一样的布局 🪆

布局是可以嵌套的。

比如你网站有一个 /dashboard 区域，这里需要一个侧边栏。

你就可以在 /app/dashboard/layout.tsx 再放一个布局文件。

javascript 复制代码

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <section>
      <aside>📊 左边的侧边栏</aside>
      <div>{children}</div>
    </section>
  );
}

于是：

全局 layout.tsx 提供导航栏和页脚。
dashboard/layout.tsx 再加一个侧边栏。
/dashboard/page.tsx 显示具体数据。

最终渲染出来的页面，就像一层层套娃，既有全局的公共部分，又有局部的专属区域。

设计哲学：为什么要有布局系统？🤔

这其实与计算机体系结构的思想暗合。

CPU 上有全局寄存器（对应全局布局）。
各进程也有私有寄存器（对应局部布局）。
公共部分减少重复，局部部分灵活扩展。

如果没有布局系统，你可能会在每个页面里写十遍 <header>。

这就像在每个函数里都自己实现 malloc ------ 既冗余又危险。💣

小结 🎯

/app 目录是新一代"城市"，模块化、现代化。
layout.tsx 是公共设施规划师，决定整个页面的基调。
布局可以像套娃一样嵌套，既有全局一致性，又能局部灵活。
本质上，这是 软件工程里抽象与复用思想 的一次 UI 实践。

最后来点文学收尾 🌿

如果说 /app 目录是城市的街区，layout.tsx 就是那条永远亮着的街灯。

它不喧嚣，却默默守护着每一个来往的行人。

当你在 /dashboard 的深夜调试数据时，

它依旧会在顶端挂着那行"🌐 我是全站导航栏"，提醒你：
不管走到哪里，你都还在这个城市的怀抱里。

✍️ 好啦，今天的"App Router 城市探险"就到此结束。

下次我们再聊聊 Server Components，那就像城市里的地下地铁 ------ 看不见，却带来巨大效率提升。