Introduction
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.
Installation
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"
Or, deploy with Vercel:
Steps
- Install dependencies using pnpm:
pnpm install
- Copy
.env.exampleto.env.localand 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
Roadmap
- Upgrade eslint to v9
- Add resend for success subscriptions
Tech Stack + Features
Frameworks
- 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
Platforms
- 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.
UI
- 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
Hooks and Utilities
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.2kor1.2Mcapitalize– Capitalize the first letter of a stringtruncate– Truncate a string to a specified lengthuse-debounce– Debounce a function call / state update
Code Quality
- 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
Miscellaneous
- Vercel Analytics – Track unique visitors, pageviews, and more in a privacy-friendly way
Author
Created by @miickasmt in 2023, released under the MIT license.
Credits
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)