Dự án rút gọn liên kết (URL Shortener) được xây dựng với Next.js và triển khai trên Cloudflare Workers.
Sau khi nhấn nút "Deploy to Cloudflare Workers", bạn sẽ được chuyển đến trang quản trị Cloudflare. Tại đây, bạn cần cấu hình các biến môi trường sau để ứng dụng hoạt động chính xác.
BETTER_AUTH_SECRET- Một chuỗi ký tự ngẫu nhiên dùng để bảo mật session.BETTER_AUTH_URL- URL gốc của ứng dụng (ví dụ:https://jshortener.ukhoặchttp://localhost:3000khi chạy nội bộ).
Trong trang cấu hình triển khai, thiết lập các lệnh sau:
| Cài đặt | Giá trị |
|---|---|
| Build command | npm run build:prod |
| Deploy command | npm run deploy:prod |
Lưu ý: Lệnh
build:prodsẽ tự động chạy migrations D1 trước khi build ứng dụng.
Để chạy dự án trên máy cá nhân, hãy tạo file .dev.vars tại thư mục gốc và thêm nội dung sau:
BETTER_AUTH_SECRET=your_secret_key_here
BETTER_AUTH_URL=http://localhost:3000- Framework: Next.js
- Runtime: Cloudflare Workers (thông qua
@opennextjs/cloudflare) - Database: Cloudflare D1 với Drizzle ORM
- Authentication: Better Auth
- UI Components: Shadcn UI, Tailwind CSS, Lucide React
- API: tRPC
Đọc tài liệu tại https://opennext.js.org/cloudflare.
Chạy server phát triển Next.js:
npm run dev
# hoặc sử dụng package manager tương ứngMở http://localhost:3000 trên trình duyệt để xem kết quả.
Bạn có thể bắt đầu chỉnh sửa trang bằng cách sửa file app/page.tsx. Trang sẽ tự động cập nhật khi bạn chỉnh sửa file.
Xem trước ứng dụng cục bộ trên môi trường Cloudflare runtime:
npm run preview
# hoặc sử dụng package manager tương ứngTriển khai ứng dụng lên Cloudflare:
npm run deploy
# hoặc sử dụng package manager tương ứngDự án sử dụng Drizzle ORM để quản lý database.
- Tạo migration:
npm run db:generate - Áp dụng migration (remote):
npm run db:push - Migrate đầy đủ:
npm run db:migrate
Để tìm hiểu thêm về Next.js, hãy xem các tài nguyên sau:
- Tài liệu Next.js - tìm hiểu về các tính năng và API của Next.js.
- Học Next.js - hướng dẫn tương tác về Next.js.
MIT License
From JS Club with ❤️
