⚡ Next.js

my-store/
├── app/                        ← 核心目录：页面 + API 都在这里
│   ├── page.tsx              → 首页
│   ├── layout.tsx            → 全局布局（每个页面都套这个壳）
│   ├── error.tsx             → 全局错误页面（替代 500）
│   ├── loading.tsx            → 全局加载状态
│   ├── not-found.tsx          → 全局 404
│   │
│   ├── api/                  ← 后端接口全放这
│   │   └── products/
│   │       ├── route.ts      → GET/POST /api/products
│   │       └── [id]/route.ts → GET/PUT/DELETE /api/products/123
│   │
│   ├── products/             ← 商品相关页面
│   │   ├── page.tsx        → /products（商品列表）
│   │   └── [id]/page.tsx   → /products/123（商品详情）
│   │
│   └── admin/                ← 管理后台
│       └── products/page.tsx  → /admin/products
│
├── components/               ← 可复用的 UI 组件（自己写的）
│   ├── Header.tsx         导航栏
│   ├── ProductCard.tsx    商品卡片
│   └── CartBadge.tsx      购物车角标
│
├── lib/                      ← 工具函数 / 配置
│   └── prisma.ts          Prisma 客户端（数据库连接）
│
├── prisma/                   ← 数据库模型定义
│   └── schema.prisma      数据表结构
│
├── public/                   ← 静态资源（图片、字体等）
│   └── logo.png
│
├── .env                      ← 环境变量（不上传 Git）
├── next.config.ts            ← Next.js 配置文件
├── tailwind.config.ts         ← Tailwind 配置
├── tsconfig.json              ← TypeScript 配置
├── package.json               ← 依赖管理（相当于 pom.xml）
└── postcss.config.js          ← CSS 处理配置

app/
├── page.tsx              →  /                  首页
├── layout.tsx            →  全局布局（所有页面共享）
├── error.tsx             →  全局错误页面（替代 500 白页）
├── loading.tsx            →  全局加载状态
├── not-found.tsx          →  全局 404 页面
│
├── api/                    ← 这个目录下全是后端接口
│   └── products/
│       ├── route.ts        →  GET/POST /api/products
│       └── [id]/route.ts   →  GET/PUT/DELETE /api/products/123
│
├── products/
│   ├── page.tsx          →  /products          商品列表页
│   └── [id]/
│       └── page.tsx      →  /products/123      商品详情页（动态路由）
│
└── cart/
    └── page.tsx          →  /cart               购物车页

// app/api/products/route.ts = @RestController @RequestMapping("/api/products")
import { NextResponse } from 'next/server'
import { prisma } from '@/lib/prisma'

// GET → 查列表（@GetMapping）
export async function GET() {
  const products = await prisma.product.findMany()
  return NextResponse.json(products)
}

// POST → 新增（@PostMapping）
export async function POST(request: Request) {
  const { name, price, stock } = await request.json()
  const product = await prisma.product.create({ data: { name, price, stock } })
  return NextResponse.json(product, { status: 201 })
}

// app/api/products/[id]/route.ts = @GetMapping("/api/products/{id}")
export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const product = await prisma.product.findUnique({ where: { id: params.id } })
  if (!product) {
    return NextResponse.json({ error: '商品不存在' }, { status: 404 })
  }
  return NextResponse.json(product)
}

export async function DELETE(
  request: Request,
  { params }: { params: { id: string } }
) {
  await prisma.product.delete({ where: { id: params.id } })
  return NextResponse.json({ success: true })
}

// app/products/page.tsx — 商品列表页
import { prisma } from '@/lib/prisma'

export default async function ProductsPage() {
  const products = await prisma.product.findMany({
    orderBy: { createdAt: 'desc' }
  })

  return (
    <div>
      <h1>商品列表</h1>
      <div className="grid grid-cols-3 gap-4">
        {products.map(p => (
          <div key={p.id}>
            <h2>{p.name}</h2>
            <p>¥{p.price}</p>
          </div>
        ))}
      </div>
    </div>
  )
}