SaasterKit: Building the Perfect Next.js Boilerplate for SaaS applications
Have you ever had one of those “aha!” moments where an incredible idea for a new app just pops into your mind? You rush to your computer, set up a new project, and start adding tasks and features to your Kanban board. But then reality hits. The mundane task of setting up basic features, such as authentication or database, grinds your enthusiasm to a halt. The once exciting project idea turns into a daunting list of technical chores.
Perhaps you have a graveyard of GitHub repositories — ambitious projects that promised to revolutionize the world but never made it past the authentication setup. Or maybe, you’ve spent countless hours perfecting a database scheme, while the rest of your application remained just a sketch. In the world of web development, it’s all too common to get bogged down by these essential yet time-consuming tasks.
If this scenario sounds familiar, you might be interested in checking out my Next.js boilerplate kit, SaasterKit, which covers every basic feature you need to kickstart your project. From incorporating authentication with Clerk, database with Prisma and Supabase, to UI & styling with TailwindCSS and Shadcn. Additionally, I’ve ensured to include i18n support, email handling with Resend, and error tracking using Sentry.
How I Did It
Starting, I knew I had to cover authentication — the backbone of almost any app. With Clerk, it turned out to be a smooth and reliable solution for easy and secure authentication. I added features like sign-in, sign-up, and user management, both client and server side.
Next, I added database integration using Prisma and Supabase. Prisma makes object-relational mapping (ORM) a breeze and can be easily configured to work with other databases supported by the tool, making it flexible and adaptable to different project requirements without significant changes. Integrating Supabase with Prisma was only natural. It has a very generous free tier that’s perfect for building MVP’s and validating ideas.
Then came the User Interface. Using Tailwind CSS was a no-brainer, given that it’s my go-to for every other project. The low-level utility classes usually allow me to quickly design the UI while keeping the markup easy to read. I discovered shadcn while working on this kit and found that it added that missing oomph factor I needed, making the UI attractive and engaging, but not overly complex.
Of all elements, the landing page is the first touchpoint between our application and its users, and hence, it should not only be visually appealing but also engaging. To address this need, I’ve included a sleek, customizable landing page template. The template is also modular, meaning you can simply move, remove or add the components to fit your specific needs and align with your brand and product vision.
After the landing page, comes the dashboard, the engine room of our application. Building it is generally a considerable chore, configuring the interfaces, linking databases, and entwining authentication services.
However, with SaasterKit, you get a functional dashboard application right out of the box! This dashboard showcases real-time integration with Clerk for authentication and Prisma & Supabase for database functionalities. It features several interactive components and widgets ready to cater to your application’s needs. As with the landing page, you have total control over the dashboard’s layout and functionality.
As a non-native English speaker in web development, I deeply understand the necessity of multi-language support in applications. It’s crucial for establishing meaningful connections with global audiences and broadening the scope of user accessibility. I added next-international, a handy library for Next.js that simplifies the implementation of internationalization (i18n). Not only does it handle language detection and routing seamlessly, but it also enables lazy loading of languages to keep your bundle size small.
Handling emails was my next task. So, I integrated Resend, which takes care of everything related to emails, from sending transactional emails to launching marketing campaigns.
Finally, I embedded Sentry for tracking errors and debugging. Its real-time error tracking feature comes in handy throughout the development process.
All these features are documented with step-by-step guides to help you set up the integrated services: https://saasterkit.vercel.app/docs
What’s Next and How You Can Help?
I’m currently exploring the incorporation of more advanced tools like OpenAI and payment processors like Lemon Squeezy. Moreover, I’m also working towards boilerplate code for MDX documentation.
Today, this boilerplate is ready for your use and it’s absolutely free. The aim is simple — to help the community build amazing applications without bothering about the basic setup.
Here’s an open invitation — If you have your favorite tools that you think would add value, do recommend them. Your contributions can help make this boilerplate even more complete.
Thank you for reading!
