next saas stripe starter

Next Saas Stripe Starter

เริ่มต้นด้วยความเร็วเต็มด้วย SaaS Starter!

บทนำ · การติดตั้ง · Tech Stack + คุณสมบัติ · ผู้แต่ง · เครดิต

การแนะนำ

เพิ่มขีดความสามารถของโครงการต่อไปของคุณด้วยสแต็กของ Next.js 14, Prisma, Neon, Auth.js v5, ส่งกลับ, ตอบสนองอีเมล, Shadcn/UI และ Stripe
ทั้งหมดบูรณาการอย่างราบรื่นกับผู้เริ่มต้น SaaS เพื่อเร่งการพัฒนาและการเดินทางของ SaaS

การติดตั้ง

โคลน & สร้าง repo นี้ในเครื่องด้วยคำสั่งต่อไปนี้:

npx create-next-app my-saas-project --example " https://github.com/mickasmt/next-saas-stripe-starter "

หรือปรับใช้กับ vercel:

ขั้นตอน

1. ติดตั้งการพึ่งพาโดยใช้ PNPM:

pnpm install

2. คัดลอก .env.example เป็น .env.local และอัปเดตตัวแปร

cp .env.example .env.local

3. เริ่มต้นเซิร์ฟเวอร์การพัฒนา:

pnpm run dev

บันทึก

ฉันใช้แพ็คเกจ NPM-check-updates สำหรับอัปเดตโครงการนี้

ใช้คำสั่งนี้เพื่ออัปเดตโครงการของคุณ: ncu -i --format group

แผนงาน

• อัพเกรด ESLINT เป็น V9
• เพิ่มการสมัครรายชื่อใหม่สำหรับการสมัครสมาชิกที่ประสบความสำเร็จ

Tech Stack + คุณสมบัติ

SaaS-Starter-Demo.mp4

เฟรมเวิร์ก

• Next.js - React Framework สำหรับการสร้างแอพนักแสดงด้วยประสบการณ์นักพัฒนาที่ดีที่สุด
• Auth.js - จัดการการรับรองความถูกต้องของผู้ใช้อย่างง่ายดายด้วยผู้ให้บริการเช่น Google, Twitter, GitHub ฯลฯ
• prisma-orm typescript-first first for node.js
• ตอบสนองอีเมล - เฟรมเวิร์กอีเมลอเนกประสงค์เพื่อการพัฒนาอีเมลที่มีประสิทธิภาพและยืดหยุ่น

แพลตฟอร์ม

• Vercel - ดูตัวอย่างและปรับใช้การเปลี่ยนแปลงได้อย่างง่ายดายด้วย Git
• RESTEND - กรอบอีเมลที่ทรงพลังสำหรับการพัฒนาอีเมลที่มีความคล่องตัว
• Neon - Postgres Serverless ที่มีการปรับสภาพอัตโนมัติการแตกแขนงพื้นที่เก็บข้อมูลที่ไม่มีก้นและระดับฟรี

UI

• Tailwind CSS-เฟรมเวิร์ก CSS ยูทิลิตี้แรกสำหรับการพัฒนา UI อย่างรวดเร็ว
• Shadcn/UI-ส่วนประกอบที่ใช้งานใหม่ได้ที่สร้างขึ้นโดยใช้ Radix UI และ Tailwind CSS
• Framer Motion - Library Motion สำหรับการตอบสนองต่อส่วนประกอบที่เคลื่อนไหวได้อย่างง่ายดาย
• Lucide-ไอคอนที่สมบูรณ์แบบพิกเซลที่สวยงาม
• next/font - เพิ่มประสิทธิภาพแบบอักษรที่กำหนดเองและลบคำขอเครือข่ายภายนอกเพื่อประสิทธิภาพที่ดีขึ้น
• ImageResponse - สร้างภาพกราฟเปิดแบบไดนามิกที่ขอบ

ตะขอและสาธารณูปโภค

• useIntersectionObserver - ตอบสนองตะขอเพื่อสังเกตเมื่อองค์ประกอบเข้าหรือออกจากวิวพอร์ต
• useLocalStorage - คงข้อมูลอยู่ในที่เก็บข้อมูลท้องถิ่นของเบราว์เซอร์
• useScroll - REACE HOOK เพื่อสังเกตตำแหน่งการเลื่อน (ตัวอย่าง)
• nFormatter - ตัวเลขรูปแบบที่มีคำต่อท้ายเช่น 1.2k หรือ 1.2M
• capitalize ประโยชน์จากตัวอักษรตัวแรกของสตริง
• truncate - ตัดทอนสตริงให้มีความยาวที่ระบุ
• use-debounce งานการใช้

คุณภาพรหัส

• TypeScript-Checker ประเภทคง
• Prettier - Formatter รหัสความเห็นสำหรับรูปแบบรหัสที่สอดคล้องกัน
• ESLINT - LINTER ที่สามารถทำได้สำหรับ next.js และ typeScript

เบ็ดเตล็ด

• Vercel Analytics-ติดตามผู้เข้าชมที่ไม่ซ้ำกันหน้าเว็บและอื่น ๆ ในแบบที่เป็นมิตรกับความเป็นส่วนตัว

ผู้เขียน

สร้างโดย @miickasmt ในปี 2566 เปิดตัวภายใต้ใบอนุญาต MIT

การให้เครดิต

โครงการนี้ได้รับแรงบันดาลใจจากอนุกรมวิธานของ Shadcn, แบบอย่างของ Steven Tey และ Antonio Erdeljac 13 AI SaaS ของ Antonio Erdeljac

• Shadcn (@shadcn)
• Steven Tey (@steventey)
• Antonio Erdeljac (@ytcodeantonio)