I have been working on many SaaS products for some years now. In each of them, my workflow was pretty much the same during the first two to four weeks of development – setting up authentication, connecting Stripe, creating an admin dashboard, configuring emails before even thinking about the actual product.
This is when I realized the need for a production-ready Next.js boilerplate that covers all those boring tasks from the beginning.
Here is what I learned along the way.
Why Most Next.js Boilerplates Are Failing
Google "nextjs boilerplate" and you'll find a dozen different options. All of them will give you something like a good starting point with TypeScript and TailwindCSS. But that is it.
Sure, it's fine if you are trying something as a personal hobby project. It's not fine if you want to build a real SaaS product.
In my opinion, a proper production-ready Next.js boilerplate needs to tackle problems you haven't faced yet not just the ones you already know.
The True Cost of Creating a SaaS Product from Scratch
Before building Kostra, I tracked how much time I needed to do some common setups for each of my SaaS projects:
• Authentication using Google OAuth, email/password, and OTP verification: 3-4 days
• Stripe integration with subscriptions, one-time payments, webhooks, billing portal: 4-5 days
• A file upload system with S3, pre-signed URLs, and private buckets: 2-3 days
• Admin panel with user management and role permissions: 3-4 days
• Email system for sending templates with a flexible provider: 2-3 days
• Blog/CMS with categories, SEO slugs, and Rich Text Editor: 2-3 days
That is about four-five weeks worth of setups before even coding a single line of your product itself. On every new project.
Even if you value your time at $50/hour, that makes almost $10,000 in setups per project. Even reusing some code is not enough to reduce it.
What a True Next.js SaaS Boilerplate Should Have
In order to create a proper Next.js SaaS boilerplate, I wrote down all the necessary features I would expect from a production app.
1. Authentication System
A basic auth implementation is always easy. A production-ready auth system requires lots of work. Here are some features that Kostra comes with:
• Support for Google OAuth and email/password by default
• OTP verification for login without using passwords
• JWT-based sessions with secure cookies
• Password reset system with expiring tokens
• Role-based authentication (admin and user routes)
Most nextjs boilerplate options end their auth implementation after saying "users can sign in". And it isn't enough for a production app.
**2. Comprehensive Stripe Integration
Creating a checkout page for payments is easy. Integrating with Stripe in a SaaS app requires more. Here is what Kostra comes with for a Stripe integration:
• Subscription management (upgrades/downgrades)
• Payments and one-time payments
• Handling all important events via webhooks
• A billing portal where customers can manage their own subscriptions
• Credits system for usage-based payments
It takes the longest to create a Stripe integration correctly because Stripe offers a wide range of possible solutions and a lot of edge cases.
3. Real File Management System
Saving files locally in dev environment is okay. Storing them securely on a cloud service requires some extra steps. Kostra uses Cloudflare R2 and S3 and includes such important things as:
• Pre-signed URLs for secure direct uploads
• Public and private buckets for storing sensitive files
• A drag-and-drop interface for uploading files
• Organization of files based on their purposes
4. Proper Architecture
This is where many boilerplate saas apps cut off a lot of corners. In Kostra, there are such architectural solutions as:
• Atomic Design with UI components being atoms, molecules, and organisms for easier maintainability
• Repository and Service patterns to separate concerns and easily modify your code
• Factory Patterns to connect external services (email providers, cloud providers) without modifying your code
• Integration with Jest for running integration tests and CI/CD
Poor architecture seems cheap until you realize that your app has reached a point where it starts slowing you down and costing a lot of money for rewriting everything.
5. Other Features a SaaS Product Requires
In addition to the mentioned ones, a full-featured saas template needs:
• A blog/CMS with SEO-friendly slugs and Rich Text Editor
• Forms for capturing leads and contacting customers
• Sending email campaigns and templates for Resend and AWS SES
• Managing users with filtering, pagination, soft deletion, and onboarding status
• Admin panel with information about all registered users, credits, and subscribed plans
What I Would Do Differently
Think about architecture first. I built several features too early which I had to rewrite later because of poor architecture decisions. Thinking about repositories and services first could save me a week or two.
Don't underestimate emails. They seem like a minor feature but when you add templates, handling deliverability issues, using several providers for transactional and marketing messages, it becomes really complex.
Test your code from day one. Configuring Jest and setting up CI/CD from day one looks like an unnecessary overhead but skipping it until you see it as important slows everything down significantly.
Who This Is For
Kostra is for developers and product owners who want to launch a SaaS app fast without sacrificing its production-ready setup. For someone who wants to try out Next.js and have freedom in developing a personal project, T3 Stack or create-next-app may be a better option.
You can check it out here: https://kostra.io/
Top comments (0)