Nextless.js - Next JS SaaS Boilerplate Template with Serverless backend
Remi W.
Posted on July 31, 2021
Recently, I was building my own SaaS product and it took me 5 months to build it from scratch, which was way more time than I expected at the beginning. It wasn't an easy journey, but I finally did it! š
Here is some of my learning to build a SaaS product in 2021.
Static Site Generator
You heard it correctly, you can build a SaaS with Static Site Generator (SSG). I made this first SaaS in Next JS in static mode (next export). So, I can host the frontend on any static hosting: cheap, fast, highly scalable, easy to maintain, secure, etc. No need to have a dynamic server to serve your UI.
UI components
The frontend is fully built in React and TypeScript styled with Tailwind CSS. I made everything:
š„ Landing Page
š„ Authentication
š„ Dashboard
š„ Forms
š„ User Settings
š„ Table
The components paradigm definitively makes your UI more modular and more reusable.
You don't need to hire a UI/UX designer anymore for a micro-SaaS!
Developer Experience, build for developers
As a passionate developer, I love using tools helping me to be a better engineer:
ā¤ļø Type checking with TypeScript
ā¤ļø Linter with ESLint
ā¤ļø Code formatter with Prettier
ā¤ļø Editor configuration for VSCode
ā¤ļø Local development and Debugging session
Maybe one day, with GitHub Copilot, you don't need to code anymore ;) But, for now, Developer Experience is extremely important to write high-quality code.
Fully Serverless
For this project, I was a solo developer, I need to get help from the right tools. And, Serverless is one of them. It really makes your code ready for production:
š One command deployment for backend
š Infrastructure as code, also deploy in one command
š Highly scalable with Serverless
š Low maintenance: no server maintenance, no Docker, no Kubernetes
Because it's Serverless, I only pay based on my traffic.
You don't need to hire a DevOps engineer anymore for a small SaaS!
Stripe integration
Like any SaaS product, you need to accept subscriptions. Accepting payment is difficult, it's even more difficult to build a subscription with recurring payment.
Stripe is one of the best solutions you can find on the market. Even that, it wasn't an easy integration: webhooks, reading documentation, code example, asking questions, testing, etc.
Here is the result, now my users can easily subscribe to any plan. They can also have access to a self-serve customer portal where they can update, upgrade, cancel, pause, resume, manage their plan.
Nextless.js, Next JS SaaS starter
It's only a showcase of what I've done recently. But, in a couple of weeks, I'll share more details on what I have learned by building my first SaaS product.
Here is the link to my first SaaS: PostMage for generating social image
You can find more information on the tech stack at Nextless.js SaaS Boilerplate
I have learned so much about Next JS, web development, frontend development, React, Tailwind CSS, TypeSript Serverless, Stripe, AWS, Infrastructure by building my first SaaS product. I'll definitely share my experience with tutorials, blog posts, etc. Stay tuned.
Posted on July 31, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
September 1, 2021