โอเพ่นซอร์ส ทางเลือกที่เบาและเหมือน Trello สำหรับนักสร้างสรรค์และอินดี้แฮกเกอร์

เน้นความเรียบง่าย ความเร็ว และการขยายขนาดได้ สร้างด้วยเทคโนโลยีสมัยใหม่: Tailwind CSS, shadcn/ui, Supabase, การเชื่อมต่อ Stripe รองรับโปรเจกต์ไม่จำกัด การทำงานร่วมกันเป็นทีม โหมดกลางวัน/กลางคืน และประสบการณ์ผู้ใช้ที่ลื่นไหล เหมาะสำหรับนักพัฒนาเดี่ยวและทีมขนาดเล็กที่ต้องการควบคุมเต็มที่โดยไม่มีความซับซ้อนที่ไม่จำเป็น

🌟 หากคุณพบว่าโปรเจกต์นี้มีประโยชน์ โปรดกดดาวให้ด้วย! เพื่อช่วยให้คนอื่นค้นพบโปรเจกต์นี้เช่นกัน

คู่มือการดีพลอย

ภาพรวม

แอปพลิเคชันนี้เปลี่ยนมาใช้ API routes ของ Next.js ในเครื่อง แทน Supabase Edge Functions สำหรับการเชื่อมต่อ Stripe ช่วยให้ดีพลอยง่ายขึ้น และสามารถใช้ไฟล์ .env ปกติในการตั้งค่าได้

การตั้งค่าตัวแปรสภาพแวดล้อม

1. สร้างไฟล์ .env.local

คัดลอก .env.example ไปเป็น .env.local แล้วกรอกค่าจริงของคุณลงไป:

cp .env.example .env.local

2. ตัวแปรสภาพแวดล้อมที่จำเป็น

#### การตั้งค่า Supabase

• NEXT_PUBLIC_SUPABASE_URL - URL ของโปรเจกต์ Supabase ของคุณ
• NEXT_PUBLIC_SUPABASE_ANON_KEY - คีย์ anonymous ของ Supabase ของคุณ
• SUPABASE_SERVICE_ROLE_KEY - คีย์ service role ของ Supabase (ใช้เฉพาะฝั่งเซิร์ฟเวอร์)

#### การตั้งค่า Stripe (ไม่บังคับ)

• STRIPE_SECRET_KEY - คีย์ลับ Stripe ของคุณ (ใช้เฉพาะฝั่งเซิร์ฟเวอร์)
• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - คีย์ publishable ของ Stripe ของคุณ
• STRIPE_WEBHOOK_SECRET - คีย์ webhook ลับของ Stripe

#### การตั้งค่าไซต์

• NEXT_PUBLIC_SITE_URL - URL ของเว็บไซต์ของคุณ (สำหรับ production)
• NEXTAUTH_URL - URL ของเว็บไซต์ของคุณ (เหมือนกับด้านบน)
• NEXTAUTH_SECRET - คีย์ลับแบบสุ่มสำหรับ NextAuth

การพัฒนาในเครื่อง

• ติดตั้ง dependency:

npm install

• ตั้งค่าตัวแปรสภาพแวดล้อมของคุณใน .env.local
• รันเซิร์ฟเวอร์สำหรับการพัฒนา:

npm run dev

• ทดสอบ Stripe webhooks ในเครื่องโดยใช้ Stripe CLI:

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

การปรับใช้งานจริง

การปรับใช้บน Vercel

• ปรับใช้ไปยัง Vercel:

npx vercel

• ตัวแปรสภาพแวดล้อม:

เพิ่มตัวแปรสภาพแวดล้อมทั้งหมดผ่านแดชบอร์ด Vercel หรือ CLI

• ตั้งค่า Stripe Webhook:
• ชี้ webhook ไปที่: https://your-domain.vercel.app/api/stripe/webhook

จุดเชื่อมต่อ API

แอปพลิเคชันนี้ใช้เส้นทาง API ภายในเหล่านี้:

• POST /api/stripe/checkout - สร้างเซสชัน Stripe checkout
• POST /api/stripe/webhook - จัดการอีเวนต์ Stripe webhook

ข้อดีของเส้นทาง API ภายใน

• การดีพลอยที่ง่ายกว่า - ไม่ต้องดีพลอยฟังก์ชัน edge แยกต่างหาก
• ตัวแปรสภาพแวดล้อม - รองรับไฟล์ .env มาตรฐาน
• การดีบักที่ดีกว่า - สามารถดีบักในเครื่องได้ง่ายขึ้น
• การผสานรวมกับเฟรมเวิร์ก - ผสานรวมกับ Next.js ได้ดีกว่า
• ไม่ผูกขาดกับผู้ให้บริการ - สามารถดีพลอยบนแพลตฟอร์มใดก็ได้ที่รองรับ Next.js

การแก้ไขปัญหา

• ปัญหา Webhook:
• ตรวจสอบให้แน่ใจว่า STRIPE_WEBHOOK_SECRET ตรงกับ webhook endpoint ใน Stripe ของคุณ
• ตรวจสอบบันทึก webhook ในแดชบอร์ด Stripe
• ตรวจสอบว่า URL webhook ถูกต้อง
• ตัวแปรสภาพแวดล้อม:
• ตรวจสอบให้แน่ใจว่าตั้งค่าตัวแปรที่ต้องการครบ
• ตรวจสอบการสะกดชื่อของตัวแปร
• ตรวจสอบว่า Supabase service role key มีสิทธิ์ที่เหมาะสม
• ปัญหา CORS:
• เส้นทาง API รวม header CORS ที่เหมาะสมไว้แล้ว
• ตรวจสอบให้แน่ใจว่าโดเมนของคุณอยู่ใน whitelist หากจำเป็น

หมายเหตุด้านความปลอดภัย

• อย่าเปิดเผย STRIPE_SECRET_KEY หรือ SUPABASE_SERVICE_ROLE_KEY กับฝั่ง client เด็ดขาด
• ใช้ prefix NEXT_PUBLIC_ เฉพาะกับตัวแปรฝั่ง client เท่านั้น
• หมุนเวียน webhook secrets ของคุณเป็นประจำ
• ตรวจสอบการส่งมอบ webhook ในแดชบอร์ด Stripe

--- Tranlated By Open Ai Tx | Last indexed: 2025-08-01 ---