Next.js 路由结构演示

项目文件结构一览

app/
├── layout.tsx              # 根布局
├── page.tsx                # 首页 /
├── (marketing)/            # 📦 路由组
│   └── pricing/page.tsx    → /pricing
├── (shop)/                 # 📦 路由组
│   └── products/page.tsx   → /products
├── about/
│   ├── page.tsx            → /about
│   ├── contact/page.tsx    → /about/contact
│   └── team/
│       ├── page.tsx        → /about/team
│       └── [slug]/page.tsx → /about/team/:slug
└── routing-demo/
    ├── layout.tsx          # 实验室导航布局
    ├── page.tsx            → /routing-demo
    ├── posts/
    │   ├── page.tsx        → /routing-demo/posts
    │   └── [id]/page.tsx   → /routing-demo/posts/:id
    ├── slow-page/
    │   ├── page.tsx        → /routing-demo/slow-page
    │   └── loading.tsx     # ⏳ 加载骨架屏
    ├── buggy/
    │   ├── page.tsx        → /routing-demo/buggy
    │   └── error.tsx       # 💥 错误边界
    └── articles/
        ├── page.tsx        → /routing-demo/articles
        └── [id]/
            ├── page.tsx    → /routing-demo/articles/:id
            └── not-found.tsx # 🚫 自定义 404