Giải pháp thay thế Trello mã nguồn mở, nhẹ, được thiết kế cho makers và indie hackers.

Tập trung vào sự đơn giản, tốc độ và khả năng mở rộng. Xây dựng với công nghệ hiện đại: Tailwind CSS, shadcn/ui, Supabase, tích hợp Stripe. Hỗ trợ dự án không giới hạn, cộng tác nhóm, chế độ tối/sáng và trải nghiệm người dùng liền mạch. Hoàn hảo cho các lập trình viên solo và nhóm nhỏ muốn kiểm soát hoàn toàn mà không phức tạp không cần thiết.

🌟 Nếu bạn thấy dự án này hữu ích, hãy tặng một ngôi sao! Điều này sẽ giúp người khác dễ dàng tìm thấy hơn.

Hướng dẫn Triển khai

Tổng quan

Ứng dụng này hiện sử dụng các tuyến API Next.js cục bộ thay cho Supabase Edge Functions để tích hợp Stripe. Điều này giúp triển khai đơn giản hơn và cho phép bạn sử dụng file .env tiêu chuẩn để cấu hình.

Thiết lập Biến Môi trường

1. Tạo file .env.local

Sao chép .env.example thành .env.local và điền các giá trị thực tế của bạn:

cp .env.example .env.local

2. Các biến môi trường bắt buộc

#### Cấu hình Supabase

• NEXT_PUBLIC_SUPABASE_URL - URL dự án Supabase của bạn
• NEXT_PUBLIC_SUPABASE_ANON_KEY - Khóa ẩn danh Supabase của bạn
• SUPABASE_SERVICE_ROLE_KEY - Khóa vai trò dịch vụ Supabase của bạn (chỉ dùng phía máy chủ)

#### Cấu hình Stripe (tùy chọn)

• STRIPE_SECRET_KEY - Khóa bí mật Stripe của bạn (chỉ dùng phía máy chủ)
• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - Khóa công khai Stripe của bạn
• STRIPE_WEBHOOK_SECRET - Bí mật webhook Stripe của bạn

#### Cấu hình trang web

• NEXT_PUBLIC_SITE_URL - URL trang web của bạn (dùng cho môi trường production)
• NEXTAUTH_URL - URL trang web của bạn (giống như trên)
• NEXTAUTH_SECRET - Một chuỗi bí mật ngẫu nhiên cho NextAuth

Phát triển cục bộ

• Cài đặt các phụ thuộc:

npm install

• Thiết lập các biến môi trường của bạn trong .env.local
• Chạy máy chủ phát triển:

npm run dev

• Kiểm tra webhook của Stripe cục bộ bằng Stripe CLI:

stripe listen --forward-to localhost:3000/api/stripe/webhook

Triển khai Sản xuất

Triển khai với Vercel

• Triển khai lên Vercel:

npx vercel

• Biến Môi Trường:

Thêm tất cả các biến môi trường thông qua bảng điều khiển Vercel hoặc CLI

• Thiết Lập Stripe Webhook:
• Trỏ webhook đến: https://your-domain.vercel.app/api/stripe/webhook

Các Đầu Mối API

Ứng dụng hiện sử dụng các tuyến API cục bộ sau:

• POST /api/stripe/checkout - Tạo phiên thanh toán Stripe
• POST /api/stripe/webhook - Xử lý các sự kiện webhook Stripe

Lợi Ích của Tuyến API Cục Bộ

• Triển Khai Đơn Giản Hơn - Không cần triển khai các hàm edge riêng biệt
• Biến Môi Trường - Hỗ trợ tệp .env tiêu chuẩn
• Gỡ Lỗi Tốt Hơn - Dễ dàng gỡ lỗi trên máy cục bộ
• Tích Hợp Framework - Tích hợp tốt hơn với Next.js
• Không Bị Ràng Buộc Nhà Cung Cấp - Có thể triển khai trên bất kỳ nền tảng nào hỗ trợ Next.js

Xử Lý Sự Cố

• Sự Cố Webhook:
• Đảm bảo STRIPE_WEBHOOK_SECRET khớp với endpoint webhook Stripe của bạn
• Kiểm tra nhật ký webhook trên bảng điều khiển Stripe
• Xác minh URL webhook là chính xác
• Biến Môi Trường:
• Đảm bảo tất cả biến cần thiết đã được thiết lập
• Kiểm tra lỗi chính tả trong tên biến
• Xác nhận khóa vai trò dịch vụ Supabase có đủ quyền
• Sự Cố CORS:
• Các tuyến API bao gồm header CORS phù hợp
• Đảm bảo tên miền của bạn đã được cho phép nếu cần

Lưu Ý Bảo Mật

• Không bao giờ tiết lộ STRIPE_SECRET_KEY hoặc SUPABASE_SERVICE_ROLE_KEY cho phía client
• Chỉ sử dụng tiền tố NEXT_PUBLIC_ cho các biến phía client
• Xoay vòng bí mật webhook thường xuyên
• Theo dõi việc gửi webhook trên bảng điều khiển Stripe

--- Tranlated By Open Ai Tx | Last indexed: 2025-07-20 ---