Next.js + Cloudflare Workers¶
Mục tiêu module¶
Sau khi hoàn thành module này, học viên có thể:
- Hiểu sự khác biệt giữa Node.js runtime và Edge runtime
- Biết các constraints khi chạy Next.js trên Edge
- Cấu hình OpenNext adapter cho Cloudflare
- Deploy Next.js app lên Cloudflare Workers
Tại sao Next.js trên Cloudflare?¶
Lợi ích¶
| Lợi ích | Chi tiết |
|---|---|
| Global edge | 300+ PoPs worldwide, latency < 50ms |
| Free tier | 100K requests/day |
| Auto-scaling | Không cần cấu hình |
| Zero cold start | Workers luôn warm |
| Integrated | KV, Queue, Cron, R2 sẵn có |
So sánh với Vercel¶
| Tiêu chí | Vercel | Cloudflare |
|---|---|---|
| Free tier | 100GB bandwidth | 100K req/day |
| Edge Functions | Limited | Full support |
| Background jobs | None | Queue, Cron |
| Storage | None | KV, R2 |
| Price (paid) | $20/month | Pay-per-use |
Kiến trúc Overview¶
┌──────────────────────────────────────────────────────────┐
│ CLOUDFLARE NETWORK │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Cloudflare Workers │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────┐ │ │
│ │ │ Next.js Application │ │ │
│ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ SSR │ │ API │ │ Static │ │ │ │
│ │ │ │ Pages │ │ Routes │ │ Assets │ │ │ │
│ │ │ └────────┘ └────────┘ └────────┘ │ │ │
│ │ │ ▲ ▲ ▲ │ │ │
│ │ │ └─────────┼─────────┘ │ │ │
│ │ │ │ │ │ │
│ │ │ OpenNext Adapter │ │ │
│ │ └──────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ │ │
│ ┌─────────────────┼─────────────────┐ │
│ ▼ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ KV │ │ Queue │ │ R2 │ │
│ │ Storage │ │ │ │ Storage │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
└──────────────────────────────────────────────────────────┘
│
▼
┌──────────────┐
│ Supabase │
│ Backend │
└──────────────┘
Nội dung Module¶
| Bài | Nội dung | Thời lượng |
|---|---|---|
| 1 | Runtime Modes | 20 min |
| 2 | Edge Runtime Constraints | 25 min |
| 3 | OpenNext Adapter | 20 min |
| 4 | Deployment Workflow | 20 min |
| 5 | Best Practices & Pitfalls | 25 min |
Tổng thời lượng: ~2 giờ
Prerequisites¶
Trước khi bắt đầu, đảm bảo bạn đã:
- [ ] Cài đặt Node.js 18+
- [ ] Có tài khoản Cloudflare (free)
- [ ] Cài đặt Wrangler CLI:
npm install -g wrangler - [ ] Đăng nhập Wrangler:
wrangler login - [ ] Có dự án Next.js sẵn (hoặc dùng starter template)
Hands-on Setup¶
# Kiểm tra wrangler đã cài đặt
wrangler --version
# Đăng nhập Cloudflare
wrangler login
# Clone starter template
git clone https://github.com/example/nextjs-cloudflare-starter
cd nextjs-cloudflare-starter
# Install dependencies
npm install
# Run locally
npm run dev
Q&A¶
- Bạn đã deploy Next.js lên đâu trước đây?
- Có kinh nghiệm với Cloudflare chưa?
- Expectations của bạn cho module này?