หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

สังเกต! ชุดเริ่มต้นนี้ยังไม่เสร็จสมบูรณ์ แต่ตอนนี้ฉันแค่เปิดเผยต่อสาธารณชนในตอนนี้ถ้าใครต้องการเพิ่มลงไป ฉันกำลังหมดแรงในการทำงานเรื่องนี้ดังนั้นฉันจึงเปิดให้ทุกคนที่ต้องการช่วยแก้ไขข้อบกพร่องใด ๆ ที่พวกเขาพบ ฯลฯ

ความไม่ลงรอยกัน

คุณสามารถเข้าร่วม Discord ได้หากคุณต้องการพูดคุยเกี่ยวกับรหัสที่นี่หรือแนะนำคุณสมบัติ / ฯลฯ

https://discord.gg/n2ueyp7rfu

Code Walkthrough (การเข้าถึงก่อน)

สำหรับผู้ที่ต้องการเนื้อหาคำแนะนำวิดีโอที่อธิบายฐานรหัสนี้มากขึ้นแสดงวิธีการปรับใช้และวิธีการบำรุงรักษาในการผลิตฉันกำลังทำงานในซีรีย์ Walkthrough วิดีโอแบบชำระเงินที่พบที่นี่ https://webdevcody.gumroad.com /l/wdc-saas-starter-kit-walkthrough ฉันอยู่ในขั้นตอนการบันทึกและแก้ไขวิดีโอ แต่ถ้าคุณซื้อตอนนี้ลดราคาเดิม 50%

ยินดีต้อนรับสู่ชุดเริ่มต้น

ยินดีต้อนรับสู่ WDC Next.js Starter Kit! นี่คือเทมเพลต GitHub ที่มีเทคโนโลยีต่อไปนี้ที่เรารู้สึกว่าเป็นจุดเริ่มต้นที่ดีสำหรับผลิตภัณฑ์ SaaS ใหม่:

  • การอนุญาต
  • การจัดการการสมัครสมาชิก (Stripe)
  • การรวมแถบ / webhooks
  • การจัดการกลุ่ม
  • อัปโหลดไฟล์ไปยัง R2
  • ละอองฝน orm
  • โหมดแสง / มืด
  • Shadcn
  • tailwind css
  • การวิเคราะห์ของ Posthog

การบริจาค

หากคุณพบปัญหาที่ชัดเจนเกี่ยวกับชุดเริ่มต้นนี้อย่าลังเลที่จะส่งคำขอดึงหรือส่งและออก เราต้องการให้ผู้เริ่มต้นนี้ง่ายด้วยเทคโนโลยีหลักที่เลือกดังนั้นเราไม่แนะนำให้พยายามเพิ่มสิ่งต่าง ๆ โดยไม่ได้รับการอนุมัติล่วงหน้า

วิธีเริ่มต้นใช้งาน

เริ่มต้นด้วยการคลิกปุ่ม "ใช้เทมเพลตนี้" บน repo gitHub เราขอแนะนำให้สร้างที่เก็บใหม่เพื่อให้คุณสามารถติดตามการเปลี่ยนแปลงรหัสของคุณ หลังจากโคลนที่เก็บข้อมูลของคุณเองลงในคอมพิวเตอร์ของคุณและเริ่มทำงาน

ข้อกำหนดเบื้องต้น

ชุดเริ่มต้นนี้ใช้ Docker และ Docker เขียนเพื่อเรียกใช้ฐานข้อมูล Postgres ดังนั้นคุณจะต้องติดตั้งหรือแก้ไขโครงการเพื่อชี้ไปที่โซลูชันฐานข้อมูลที่โฮสต์

วิธีการวิ่ง

  1. cp .env.sample .env
  2. npm i
  3. docker compose up
  4. npm run db:migrate
  5. npm run dev

การตั้งค่า env

ชุดเริ่มต้นนี้ขึ้นอยู่กับบริการภายนอกสองสามอย่างเช่น Google Oauth , Stripe และ Restend คุณจะต้องทำตามขั้นตอนด้านล่างและตรวจสอบให้แน่ใจว่าทุกอย่างคือการตั้งค่าและคัดลอกค่าความจำเป็นลงในไฟล์. ENV ของคุณ:

ส่งคืน

สร้างบัญชีบน https://resend.com/ และสร้างคีย์ API และวางลงใน email_server_password

ตั้งค่าโดเมนของคุณในการส่งกลับเพื่อให้คุณสามารถส่งอีเมลจากโดเมนที่กำหนดเองของคุณและตั้ง ค่า email_from เพื่อให้ตรงกับที่คาดหวังจากบรรทัด ในการทำเช่นนี้ให้ไปที่ผู้ให้บริการโดเมนของคุณและเพิ่มระเบียนที่จำเป็นที่ระบุไว้ในส่วนต่อ

Cloudflare R2

TODO: เพิ่มข้อมูลเกี่ยวกับถังและกุญแจ

ฐานข้อมูล

ชุดเริ่มต้นนี้ใช้ postgres Supabase จัดเตรียมฐานข้อมูล Postgres ฟรี 2 ฐาน ตั้งค่าฐานข้อมูลและรับ database_url ของคุณ

การตั้งค่าแถบ

ชุดเริ่มต้นนี้ใช้แถบซึ่งหมายความว่าคุณจะต้องตั้งค่าบัญชี Stripe ที่ https://stripe.com หลังจากสร้างบัญชีและโครงการคุณจะต้องตั้งค่าตัวแปร ENV ต่อไปนี้:

  • stripe_api_key
  • next_public_stripe_key
  • stripe_webhook_secret
  • price_id
  • next_public_stripe_manage_url

คุณสามารถค้นหาสิ่งเหล่านี้ได้อย่างไรด้านล่าง:

คีย์แถบ

คุณต้องกำหนดทั้ง next_public_stripe_key และ stripe_api_key ภายใน. env สิ่งเหล่านี้สามารถพบได้ที่นี่:

  • https://dashboard.stripe.com/test/apikeys

กุญแจ WebHook

ขึ้นอยู่กับว่าคุณกำลังพัฒนาในพื้นที่หรือปรับใช้กับ Prod มีสองเส้นทางที่คุณต้องใช้เพื่อรับรหัสเว็บ:

การพัฒนาท้องถิ่น

  1. ติดตั้ง Stripe CLI: สำหรับ macOS หรือ linux คุณสามารถใช้ Homebrew: brew install stripe/stripe-cli/stripe
  • สำหรับ Windows คุณสามารถใช้ Windows Installer ได้จากหน้า stripe CLI GitHub releases - https://github.com/stripe/stripe-clie/releases
  1. เพิ่ม Stripe CLI ลงในเส้นทางของคุณ: ตรวจสอบให้แน่ใจว่าไดเรกทอรีที่มีการทำงานของแถบ CLI นั้นอยู่ในตัวแปรสภาพแวดล้อมเส้นทางของระบบของคุณ
  2. เราจัดเตรียม stripe:listen คุณสามารถเรียกใช้ได้หากคุณต้องการตั้งค่าแอปพลิเคชันที่ใช้งานในพื้นที่ของคุณเพื่อแสดงรายการสำหรับเหตุการณ์แถบใด ๆ เรียกใช้คำสั่งนี้และคัดลอก WebHook Secret ที่พิมพ์ลงในคอนโซลลงในไฟล์. ENV ของคุณ

การผลิต

เมื่อไปถึงการผลิตคุณจะต้องสร้างจุดสิ้นสุด webhook และคัดลอกความลับ webhook ของคุณลงใน stripe_webhook_secret :

  1. https://dashboard.stripe.com/test/webhooks
  2. สร้างจุดสิ้นสุดที่ชี้ไปที่ https://your-domain.com/api/webhooks/stripe
  3. ฟังสำหรับกิจกรรมใบแจ้งหนี้ payment_succeeded และ checkout.session.completed
  4. ค้นหาคีย์ลับของคุณและคัดลอกลงในโครงการของคุณ

ID ราคา (ผลิตภัณฑ์)

คุณจะต้องสร้างผลิตภัณฑ์สมัครสมาชิกใน Stripe:

  1. https://dashboard.stripe.com/products/Create
  2. สร้างผลิตภัณฑ์ครั้งเดียวของคุณ
  3. คัดลอกรหัสราคา
  4. วางรหัสราคาลงใน. env ของ price_id

พอร์ทัลลูกค้า

Stripe มีวิธีการในตัวสำหรับลูกค้าในการยกเลิกการสมัครสมาชิก คุณจะต้องเปิดใช้งานคุณสมบัตินี้:

  1. https://dashboard.stripe.com/settings/billing/portal
  2. คลิกเปิดใช้งานปุ่มลิงก์พอร์ทัล
  3. คัดลอกลิงค์พอร์ทัลของคุณ
  4. วางเป็นตัวแปร env เป็น next_public_stripe_manage_url

host_name

เมื่อลดการผลิตคุณต้องการตั้งค่า host_name เป็น fqdn ของคุณเช่น https://you-domain.com

การตั้งค่า Auth Auth

ผู้ให้บริการ Google

โดยค่าเริ่มต้นผู้เริ่มต้นนี้มาพร้อมกับผู้ให้บริการ Google เท่านั้นซึ่งคุณจะต้องติดตั้ง:

  1. https://console.cloud.google.com/apis/credentials
  2. สร้างโครงการใหม่
  3. การตั้งค่าหน้าจอความยินยอมของ OAuth
  4. สร้างข้อมูลรับรอง - รหัสไคลเอนต์ OAuth
  5. สำหรับต้นกำเนิด JavaScript ที่ได้รับอนุญาต
  • http: // localhost: 3000
  • https://your-domain.com
  1. uris เปลี่ยนเส้นทางที่ได้รับอนุญาต
  • http: // localhost: 3000/api/auth/callback/google
  • https://your-domain.com/api/auth/callback/google
  1. ตั้งค่า Google ID ของคุณและความลับภายใน. ENV
  • google_client_id
  • google_client_secret

ผู้ให้บริการ GitHub

TODO: เพิ่มข้อมูล

หน้าหลัง

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด