# web-ecommerce

> 建立 Next.js 電商網站，包含商品管理、購物車、訂單、金流串接

- Author: Felix
- Repository: Felix-0901/studio-docs
- Version: 20260130141515
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/Felix-0901/studio-docs
- Web: https://mule.run/skillshub/@@Felix-0901/studio-docs~web-ecommerce:20260130141515

---

---
description: 建立 Next.js 電商網站，包含商品管理、購物車、訂單、金流串接
---

# Web E-commerce Skill

建立完整的電商網站，使用 Next.js 14 + Prisma + PostgreSQL。

## 使用方式

用戶會提供：
- 專案名稱或資料夾位置
- 需要的功能模組
- 資料庫連線字串（可選）
- 金流選擇（綠界/藍新）

## 執行步驟

### 1. 專案初始化

```bash
# 建立 Next.js 專案
npx -y create-next-app@latest ./ --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm

# 安裝依賴
npm install prisma @prisma/client next-auth@beta @auth/prisma-adapter
npm install zod react-hook-form @hookform/resolvers
npm install bcryptjs crypto-js
npm install lucide-react clsx tailwind-merge
npm install -D @types/bcryptjs @types/crypto-js

# 初始化 Prisma
npx prisma init
```

### 2. 建立目錄結構

```bash
mkdir -p src/components/{ui,features}
mkdir -p src/lib
mkdir -p src/types
mkdir -p src/app/{api,\(public\),\(auth\),admin}
```

### 3. 建立核心檔案

依序建立以下檔案：

#### src/lib/prisma.ts
```typescript
import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

export default prisma
```

#### src/lib/utils.ts
```typescript
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function formatPrice(price: number): string {
  return new Intl.NumberFormat('zh-TW', {
    style: 'currency',
    currency: 'TWD',
    minimumFractionDigits: 0,
  }).format(price)
}
```

### 4. 設計 Prisma Schema

根據用戶需求，參考 `docs/web-development/02-database-design.md` 建立 schema，必須包含：

- User（用戶）
- Account、Session（NextAuth）
- Product（商品）
- Category（分類）
- Order、OrderItem（訂單）
- 其他用戶需要的模組

### 5. 設定認證系統

參考 `docs/web-development/04-authentication.md` 建立：

- src/lib/auth.ts
- src/app/api/auth/[...nextauth]/route.ts
- src/middleware.ts

### 6. 建立 API Routes

為每個功能模組建立 CRUD API：

- /api/products
- /api/categories
- /api/orders
- /api/users

### 7. 金流串接

根據用戶選擇，參考 `docs/web-development/05-payment-integration.md`：

- 綠界：建立 src/lib/ecpay.ts
- 藍新：建立 src/lib/newebpay.ts

### 8. 建立前端頁面

根據電商需求建立：

- 首頁
- 商品列表/詳情頁
- 購物車
- 結帳流程
- 會員中心
- 後台管理

### 9. Docker 設定

建立 Dockerfile 和 docker-compose.yml，參考 `docs/web-development/06-coolify-deployment.md`

### 10. 環境變數

建立 .env.example 包含所有必要變數

## 完成確認

- [ ] 專案可本地執行 `npm run dev`
- [ ] 資料庫遷移成功
- [ ] 認證系統運作
- [ ] 商品 CRUD 正常
- [ ] 訂單流程正常
- [ ] 金流串接測試通過
- [ ] Docker 建置成功