นี่คือเทมเพลตเริ่มต้นสำหรับการสร้างแอปพลิเคชัน SaaS โดยใช้ Next.js พร้อมรองรับการตรวจสอบสิทธิ์ การรวม Stripe สำหรับการชำระเงิน และแดชบอร์ดสำหรับผู้ใช้ที่เข้าสู่ระบบ
การสาธิต: https://next-saas-start.vercel.app/
ในปี 2020 ฉันได้จัดทำหลักสูตรชื่อ "React 2025" ซึ่งแสดงวิธีสร้างแอปพลิเคชัน SaaS ด้วย Next.js, Stripe และเครื่องมืออื่นๆ
ใกล้จะถึงปี 2025 แล้ว React 19 ได้นำเสนอฟีเจอร์ใหม่ที่น่าทึ่งมากมายที่ฉันคาดไม่ถึง! Repo นี้เป็นการสาธิตรูปแบบ React และ Next.js ล่าสุด รูปแบบเหล่านี้ช่วยลดความซับซ้อนของงานทั่วไปบางอย่างในการสร้าง SaaS ของคุณ เช่น การสร้างแบบฟอร์ม การพูดคุยกับฐานข้อมูลของคุณ และอื่นๆ อีกมากมาย
ตัวอย่างเช่น ตอนนี้ React มี hooks ในตัว เช่น useActionState เพื่อจัดการข้อผิดพลาดของแบบฟอร์มอินไลน์และสถานะที่รอดำเนินการ React Server Actions สามารถแทนที่โค้ดสำเร็จรูปจำนวนมากที่จำเป็นในการเรียกเส้นทาง API จากฝั่งไคลเอ็นต์ และสุดท้าย React use hook รวมกับ Next.js ทำให้การสร้าง useUser() hook อันทรงพลังเป็นเรื่องง่ายอย่างเหลือเชื่อ
เราสามารถดึงข้อมูลผู้ใช้จากฐานข้อมูล Postgres ของเราในรูปแบบรูทได้ แต่ ไม่ สามารถรอ Promise ได้ แต่เราส่งต่อ Promise ไปยังผู้ให้บริการบริบท React ซึ่งเราสามารถ "แกะ" และรอการสตรีมข้อมูลได้ ซึ่งหมายความว่าเราสามารถมีสิ่งที่ดีที่สุดจากทั้งสองโลกได้: โค้ดที่ง่ายต่อการดึงข้อมูลจากฐานข้อมูลของเรา (เช่น getUser() ) และ React hook ที่เราสามารถใช้ใน Client Components (เช่น useUser() )
เรื่องน่ารู้: UI ส่วนใหญ่สำหรับแอปพลิเคชันนี้สร้างด้วย v0 ? รายละเอียดเพิ่มเติมที่นี่ หากคุณต้องการเรียนรู้เกี่ยวกับ repo นี้
/ ) พร้อมองค์ประกอบ Terminal แบบเคลื่อนไหว/pricing ) ซึ่งเชื่อมต่อกับ Stripe Checkoutgit clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install ใช้สคริปต์การตั้งค่าที่ให้มาเพื่อสร้างไฟล์ .env ของคุณ:
pnpm db:setupจากนั้น รันการย้ายฐานข้อมูลและเริ่มต้นฐานข้อมูลด้วยผู้ใช้และทีมเริ่มต้น:
pnpm db:migrate
pnpm db:seedสิ่งนี้จะสร้างผู้ใช้และทีมต่อไปนี้:
[email protected]admin123 แน่นอนว่าคุณสามารถสร้างผู้ใช้ใหม่ผ่านทาง /sign-up ได้
สุดท้ายให้รันเซิร์ฟเวอร์การพัฒนา Next.js:
pnpm devเปิด http://localhost:3000 ในเบราว์เซอร์ของคุณเพื่อดูการทำงานของแอป
หรือคุณสามารถฟัง Stripe webhooks ในเครื่องผ่าน CLI เพื่อจัดการกับเหตุการณ์การเปลี่ยนแปลงการสมัครสมาชิก:
stripe listen --forward-to localhost:3000/api/stripe/webhookหากต้องการทดสอบการชำระเงินแบบ Stripe ให้ใช้รายละเอียดบัตรทดสอบต่อไปนี้:
4242 4242 4242 4242เมื่อคุณพร้อมที่จะปรับใช้แอปพลิเคชัน SaaS ของคุณกับการใช้งานจริง ให้ทำตามขั้นตอนเหล่านี้:
https://yourdomain.com/api/stripe/webhook )checkout.session.completed , customer.subscription.updated )ในการตั้งค่าโปรเจ็กต์ Vercel ของคุณ (หรือระหว่างการใช้งาน) ให้เพิ่มตัวแปรสภาพแวดล้อมที่จำเป็นทั้งหมด ตรวจสอบให้แน่ใจว่าได้อัปเดตค่าสำหรับสภาพแวดล้อมการใช้งานจริง รวมถึง:
BASE_URL : ตั้งค่านี้เป็นโดเมนที่ใช้งานจริงของคุณSTRIPE_SECRET_KEY : ใช้รหัสลับ Stripe ของคุณสำหรับสภาพแวดล้อมการใช้งานจริงSTRIPE_WEBHOOK_SECRET : ใช้ข้อมูลลับของเว็บฮุคจากเว็บฮุคที่ใช้งานจริงที่คุณสร้างในขั้นตอนที่ 1POSTGRES_URL : ตั้งค่านี้เป็น URL ฐานข้อมูลที่ใช้งานจริงของคุณAUTH_SECRET : ตั้งค่านี้เป็นสตริงสุ่ม openssl rand -base64 32 จะสร้างขึ้นมา แม้ว่าเทมเพลตนี้ตั้งใจให้เรียบง่ายและเพื่อใช้เป็นทรัพยากรการเรียนรู้ แต่ก็มีเวอร์ชันที่ต้องชำระเงินอื่นๆ ในชุมชนซึ่งมีฟีเจอร์ครบถ้วนมากกว่า:
