Nextless.js - Next JS SaaS Boilerplate Template with Serverless backend

ixartz

Remi W.

Posted on July 31, 2021

Nextless.js - Next JS SaaS Boilerplate Template with Serverless backend

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

Next JS SaaS Boilerplate Starter

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.

šŸ’– šŸ’Ŗ šŸ™… šŸš©
ixartz
Remi W.

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