![SaaS Starter](public/og.jpg)
Start at full speed with SaaS Starter !
Introduction · Installation · Tech Stack + Features · Author · Credits
Empower your next project with the stack of Next.js 14, Prisma, Neon, Auth.js v5, Resend, React Email, Shadcn/ui, and Stripe.
All seamlessly integrated with the SaaS Starter to accelerate your development and saas journey.
Clone & create this repo locally with the following command:
npx create-next-app my-saas-project --example "https://github.com/mickasmt/next-saas-stripe-starter"
- Install dependencies using pnpm:
pnpm install
- Copy
.env.example
to.env.local
and update the variables.
cp .env.example .env.local
- Start the development server:
pnpm run dev
Note
I use npm-check-updates package for update this project.
Use this command for update your project: ncu -i --format group
Warning
You need update .react-email
folder before use pnpm run email
. Check the link here if you have the error : renderToReadableStream not found
-
Fix Vaul drawer for mobile sign in -
Update OG image -
Add Server Actions on billing form (stripe) -
Add Server Actions on user name form -
Upgrade Auth.js to v5 -
Change database platform for Neon (planetscale removes its free plan on April 2024) -
Switch subscription plan (enable on stripe dashboard) -
Update documentation for installation & configuration - Improve blog design
- Upgrade eslint to v9
- Add resend for success subscriptions
saas-starter-demo.mp4
- Next.js – React framework for building performant apps with the best developer experience
- Auth.js – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
- Prisma – Typescript-first ORM for Node.js
- React Email – Versatile email framework for efficient and flexible email development
- Vercel – Easily preview & deploy changes with git
- Resend – A powerful email framework for streamlined email development
- Neon – Serverless Postgres with autoscaling, branching, bottomless storage and generous free tier.
- Tailwind CSS – Utility-first CSS framework for rapid UI development
- Shadcn/ui – Re-usable components built using Radix UI and Tailwind CSS
- Framer Motion – Motion library for React to animate components with ease
- Lucide – Beautifully simple, pixel-perfect icons
next/font
– Optimize custom fonts and remove external network requests for improved performanceImageResponse
– Generate dynamic Open Graph images at the edge
useIntersectionObserver
– React hook to observe when an element enters or leaves the viewportuseLocalStorage
– Persist data in the browser's local storageuseScroll
– React hook to observe scroll position (example)nFormatter
– Format numbers with suffixes like1.2k
or1.2M
capitalize
– Capitalize the first letter of a stringtruncate
– Truncate a string to a specified lengthuse-debounce
– Debounce a function call / state update
- TypeScript – Static type checker for end-to-end typesafety
- Prettier – Opinionated code formatter for consistent code style
- ESLint – Pluggable linter for Next.js and TypeScript
- Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way
Created by @miickasmt in 2023, released under the MIT license.
This project was inspired by shadcn's Taxonomy, Steven Tey’s Precedent, and Antonio Erdeljac's Next 13 AI SaaS.
- Shadcn (@shadcn)
- Steven Tey (@steventey)
- Antonio Erdeljac (@YTCodeAntonio)