https://github.com/lubomirgeorgiev/cloudflare-workers-nextjs-saas-template
Cloudflare Workers/Next.js SaaS Template
https://github.com/lubomirgeorgiev/cloudflare-workers-nextjs-saas-template
cloudflare cloudflare-workers nextjs saas-boilerplate
Last synced: 13 days ago
JSON representation
Cloudflare Workers/Next.js SaaS Template
- Host: GitHub
- URL: https://github.com/lubomirgeorgiev/cloudflare-workers-nextjs-saas-template
- Owner: LubomirGeorgiev
- Created: 2025-01-09T21:42:24.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-04-06T22:23:45.000Z (18 days ago)
- Last Synced: 2025-04-10T13:16:31.597Z (15 days ago)
- Topics: cloudflare, cloudflare-workers, nextjs, saas-boilerplate
- Language: TypeScript
- Homepage: https://saas-stack.startupstudio.dev/sign-in
- Size: 755 KB
- Stars: 285
- Watchers: 10
- Forks: 53
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cloudflare Workers SaaS Template
[](https://github.com/LubomirGeorgiev/cloudflare-workers-nextjs-saas-template/actions/workflows/deploy.yml)
# [Live Demo](https://saas-stack.startupstudio.dev/sign-up)
# [Github Repo](https://github.com/LubomirGeorgiev/cloudflare-workers-nextjs-saas-template)
This is a SaaS template for Cloudflare Workers. It uses the [OpenNext](https://opennext.js.org/cloudflare) framework to build a SaaS application.
Have a look at the [project plan](./cursor-docs/project-plan.md) to get an overview of the project.
> [!TIP]
> This template is brought to you by 👉 [StartupStudio.dev](https://startupstudio.dev/?ref=github-readme-nextjs-template) 👈 - where we help businesses automate operations and boost productivity through custom AI implementations. Just like this open-source project demonstrates technical excellence, we deliver:
>
> - Process automation with LLM-powered workflows
> - AI strategy consulting for sustainable scaling
> - Custom SaaS development using cutting-edge stacks
>
> Hundrets of developers already trust our codebase - Just Imagine what we could build for your business.
# Supported Features:
- 🔐 Authentication with Lucia Auth
- 📧 Email/Password Sign In
- 📝 Email/Password Sign Up
- 🔑 WebAuthn/Passkey Authentication
- 🌐 Google OAuth/SSO Integration
- 🔄 Forgot Password Flow
- 🔒 Change Password
- ✉️ Email Verification
- 🗝️ Session Management with Cloudflare KV
- 🤖 Turnstile Captcha Integration
- ⚡ Rate Limiting for Auth Endpoints
- 🛡️ Protected Routes and Layouts
- 📋 Session Listing and Management
- 🔒 Anti-Disposable Email Protection
- 💾 Database with Drizzle and Cloudflare D1
- 🏗️ Type-safe Database Operations
- 🔄 Automatic Migration Generation
- 💻 SQLite for Local Development
- ⚡ Efficient Data Fetching
- 🔍 Type-safe Queries
- 📨 Email Service with React Email and Resend or Brevo
- 🎨 Beautiful Email Templates
- 👀 Email Preview Mode
- 🔧 Local Email Development Server
- 📬 Transactional Emails
- ✉️ Email Verification Flow
- 📱 Responsive Email Templates
- 🚀 Deployment with Github Actions
- ⚙️ Automatic Deployments
- 🔐 Environment Variables Management
- 📦 Database Migrations
- 🔄 Comprehensive CI/CD Pipeline
- 🧹 Cache Purging
- ✅ Type Checking
- 🎨 Modern UI
- 🎨 Tailwind CSS
- 🧩 Shadcn UI Components
- 🌓 Dark/Light Mode
- 📱 Responsive Design
- ⚡ Loading States and Animations
- 🔔 Toast Notifications
- ⚙️ Settings Dashboard
- 🏠 Landing Page
- ✨ Beautiful Email Templates
- 👤 Profile Settings Page
- 🎯 Form Validation States
- 💳 Credit Billing System
- 💰 Credit-based Pricing Model
- 🔄 Monthly Credit Refresh
- 📊 Credit Usage Tracking
- 💳 Stripe Payment Integration
- 📜 Transaction History
- 📦 Credit Package Management
- 💸 Pay-as-you-go Model
- 📈 Usage Analytics
- 👑 Admin Dashboard
- 👥 User Management
- ✨ Validations with Zod and React Hook Form
- 🛡️ Type-safe Form Validations
- 🔒 Server-side Validations
- 🔍 Client-side Validations
- 🧹 Input Sanitization
- ⚡ Real-time Validation
- 🔄 Form State Management
- 👨💻 Developer Experience
- 🧪 Local Development Setup
- 📘 TypeScript Support
- 🔍 ESLint Configuration
- ✨ Prettier Configuration
- 🔐 Type-safe Environment Variables
- 🏗️ Cloudflare Types Generation
- 🤖 AI-powered Development with Cursor
- 📚 Comprehensive Documentation
- 📐 Project Structure Best Practices
- ⚡ Edge Computing
- 🌍 Global Deployment with Cloudflare Workers
- 🚀 Zero Cold Starts
- 💨 Edge Caching
- ⚛️ React Server Components
- 🖥️ Server-side Rendering
- 💾 Edge Database with D1
- 🗄️ Session Storage with KV
- ⚡ API Rate Limiting
## Planned features (TODO):
- [ ] Update Meta SEO tags 🔍
- [ ] Dynamic OpenGraph images 📸
- [ ] sitemap.xml 📄
- [ ] robots.txt 📄
- [ ] Multi-language support (i18n) 🌐
- [ ] Notifications 🔔
- [ ] Webhooks 🔗
- [ ] Track bundle size with https://www.npmjs.com/package/webpack-bundle-analyzer 📊
# Running it locally
1. `pnpm install`
2. Copy `.dev.vars.example` to `.dev.vars` and fill in the values.
3. Copy `.env.example` to `.env` and fill in the values.
4. `pnpm db:migrate:dev` - Creates a local SQLite database and applies migrations
5. `pnpm dev`
6. Open http://localhost:3000
## Changes to wrangler.jsonc
After making a change to wrangler.jsonc, you need to run `pnpm cf-typegen` to generate the new types.
## Things to change and customize before deploying to production
1. Go to `src/constants.ts` and update it with your project details
2. Update the documentation in `./cursor-docs` with your project details so that Cursor AI can give you better suggestions
3. Update the footer in `src/components/footer.tsx` with your project details and links
4. Optional: Update the color palette in `src/app/globals.css`
5. Update the metadata in `src/app/layout.tsx` with your project details
## Deploying to Cloudflare with Github Actions
1. Create D1 and KV namespaces
2. Set either `RESEND_API_KEY` or `BREVO_API_KEY` as a secret in your Cloudflare Worker depending on which email service you want to use.
3. Create a Turnstile catcha in your Cloudflare account, and set the `NEXT_PUBLIC_TURNSTILE_SITE_KEY` as a Github Actions variable.
4. Set `TURNSTILE_SECRET_KEY` as a secret in your Cloudflare Worker.
5. Update the `wrangler.jsonc` file with the new database and KV namespaces and env variables. Search for "cloudflare-workers-nextjs-saas-template" recursively in the whole repository and change that to the name of your project. Don't forget that the name you choose at the top of the wrangler.jsonc should be the same as `services->[0]->service` in the same file.
6. Go to https://dash.cloudflare.com/profile/api-tokens and click on "Use template" next to "Edit Cloudflare Workers". On the next, page add the following permissions in addition to the ones from the template:
- Account:AI Gateway:Edit
- Account:Workers AI:Edit
- Account:Queues:Edit
- Account:Vectorize:Edit
- Account:D1:Edit
- Account:Cloudflare Images:Edit
- Account:Workers KV Storage:Edit
- Zone:Cache Purge:Purge
7. Add the API token to the Github repository secrets as `CLOUDFLARE_API_TOKEN`
8. Add the Cloudflare account id to the Github repository variables as `CLOUDFLARE_ACCOUNT_ID`
9. Optional: If you want clear the CDN cache on deploy, add `CLOUDFLARE_ZONE_ID` to the Github repository variables for the zone id of your domain. This is the zone id of your domain, not the account id.
10. Push to the main branch
## Email templates
If you want to preview and edit the email templates you can:
1. `pnpm email:dev`
2. Open http://localhost:3001
3. Edit the email templates in the `src/react-email` folder
4. For inspiration you can checkout https://react.email/templates
### How to upgrade this template
Since this template is based on the [OpenNext](https://opennext.js.org/cloudflare) framework we need to make sure that we are following the changes they are making and update this template accordingly.
To see the changes clone https://github.com/cloudflare/workers-sdk and then do `git diff 869ec7b...main -- packages/create-cloudflare/templates-experimental/next/` you will see the changes that we need to make to this template.