Next.js App Router 的目录结构

.
└── app/
    ├── _components/                # 1. 私有文件夹：存放共享组件，不会成为路由
    │   ├── Button.tsx
    │   └── Header.tsx
    │
    ├── layout.tsx                  # 2. 根布局：包裹所有页面
    ├── page.tsx                    # 3. 根页面：对应 URL "/"
    │
    ├── (marketing)/                # 4. 路由组：组织市场营销相关页面，不影响 URL
    │   ├── layout.tsx              #    - 此组的专属布局
    │   ├── about/
    │   │   └── page.tsx            #    - URL: /about
    │   └── contact/
    │       └── page.tsx            #    - URL: /contact
    │
    ├── dashboard/                  # 5. 静态路由
    │   ├── @team/                  # 6. 并行路由 "team" 插槽
    │   │   └── page.tsx
    │   ├── @analytics/             # 7. 并行路由 "analytics" 插槽
    │   │   └── page.tsx
    │   │
    │   ├── layout.tsx              # 8. 仪表盘布局，会接收 team 和 analytics props
    │   ├── page.tsx                # 9. 仪表盘主页，URL: /dashboard
    │   ├── settings/
    │   │   └── page.tsx            #    - URL: /dashboard/settings
    │   └── default.tsx             # 10. 并行路由的默认后备 UI
    │
    ├── blog/
    │   ├── [slug]/                 # 11. 动态路由
    │   │   ├── page.tsx            #     - URL: /blog/hello-world, /blog/another-post
    │   │   └── loading.tsx         #     - 加载博客文章时的 UI
    │   └── page.tsx                # 12. 博客列表页，URL: /blog
    │
    └── api/                        # 13. API 路由
        └── posts/
            └── route.ts            #     - API 端点: /api/posts (可处理 GET, POST 等)

app/
└── dashboard/
    ├── _components/         # ✅ 私有文件夹，不会被路由
    │   ├── Chart.tsx
    │   └── StatCard.tsx
    │
    ├── _hooks/              # ✅ 存放仅供 dashboard 使用的 hooks
    │   └── useAnalytics.ts
    │
    ├── layout.tsx
    └── page.tsx             # 仪表盘页面，对应 /dashboard

app/
├── (marketing)/                  # 市场营销组，不影响 URL
│   ├── about/
│   │   └── page.tsx              # URL: /about
│   ├── pricing/
│   │   └── page.tsx              # URL: /pricing
│   └── layout.tsx                # ❗️只应用于 (marketing) 组的布局
│
├── (app)/                        # 应用核心功能组，不影响 URL
│   ├── dashboard/
│   │   └── page.tsx              # URL: /dashboard
│   ├── settings/
│   │   └── page.tsx              # URL: /settings
│   └── layout.tsx                # ❗️只应用于 (app) 组的布局
│
└── layout.tsx                    # 根布局，会被两个组的布局所继承

import PublicHeader from '@/components/PublicHeader';
import PublicFooter from '@/components/PublicFooter';
export default function MarketingLayout({ children }) {
  return (
    <>
      <PublicHeader />
      <main>{children}</main>
      <PublicFooter />
    </>
  );
}

import Sidebar from '@/components/Sidebar';
import UserNav from '@/components/UserNav';
export default function AppLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <Sidebar />
      <main>
        <UserNav />
        {children}
      </main>
    </div>
  );
}

app/
└── dashboard/
    ├── @users/                 # "users" 插槽
    │   └── page.tsx
    │
    ├── @revenue/               # "revenue" 插槽
    │   └── page.tsx
    │
    ├── layout.tsx              # ❗️接收插槽作为 props
    └── page.tsx                # 主页面内容 (隐式的 children 插槽)

// 布局文件会收到每个插槽作为 props
export default function DashboardLayout({ children, users, revenue }) {
  return (
    <>
      <h1>Dashboard</h1>
      {children} {/* 这是 dashboard/page.tsx 的内容 */}
      <div style={{ display: 'flex', marginTop: '20px' }}>
        <div style={{ flex: 1, marginRight: '10px' }}>
          <h2>Users</h2>
          {users} {/* 这是 @users/page.tsx 的内容 */}
        </div>
        <div style={{ flex: 1 }}>
          <h2>Revenue</h2>
          {revenue} {/* 这是 @revenue/page.tsx 的内容 */}
        </div>
      </div>
    </>
  );
}

app/
└── dashboard/
    └── @users/
        ├── default.tsx  # 当 @users 槽无法匹配时渲染这个
        └── page.tsx