Create a NextJS SaaS application in 30 minutes
Create a functional SaaS example with authentication, subscriptions, a user dashboard built with React / NextJS in 30 minutes for free.
Guide revised in May 2023
This guide shows how to get a fully functional, complete SaaS starting point with the following features built-in:
Turnkey Stripe Customer Portal, Checkout, Plans management - provided by SaaSBox
Turnkey user authentication (login, sign up password reset) - by SaaSBox
NextJS 13
Open source and free SaaS user dashboard, built with great looking components.
NextUI for general UI components.
Tremor UI for charts.
The turnkey features are hosted and maintained for you, so you don't have to.
Why use this guide over many other SaaS templates?
No set up is required for above functionality (no need to write code or run any script). Add your core competency to the provided NextJS dashboard and launch your SaaS. This will save you roughly 10 weeks on your launch.
Limit your maintenance responsibility to the core feature of your SaaS that makes it unique. As SaaSBox is hosted, the features that come as turnkey are maintained and updated by our team. Comparing this to a SaaS template, you would have to buy a new template on each update, port your existing code to work with the new template, and maintain the template yourself. Working with SaaSBox is like adding an engineer to your team saving you that part of the work.
Hosting
As per this guide the SaaS hosting is provided by Vercel, and SaaSBox, (+ any database provider you prefer).
Step 0. Prerequisites
Install NodeJS
Install NodeJS and npm on your environment. (Link)
SaaSBox
Get a SaaSBox account by signing up at https://saasbox.net and make sure to set up for a free plan at https://saasbox.net/pricing.
Vercel
Get a Vercel account at https://vercel.com. It doesn't need to be a paid account.
Get Started - Clone and build the repo
Clone the free and MIT licensed starter repository at: https://github.com/getsaasbox/nextjs-nextui-sboxauth-example
Install its dependencies:
Note: A Tailwind UI version of the user dashboard is also available. Please contact us at team@saasbox.net if interested.
Set up your SaaSBox domain at your-app-domain.saasbox.net
In the SaaSBox admin dashboard, go under domain > subdomain and change the subdomain value from the app-1234 to one that represents your application. Click on Save.
Set up SaaSBox Environment Variables:
Create a .env.local file with below values, you may find the App ID, API Key and JWT Secret all in your SaaSBox admin dashboard on the left. The NEXT_PUBLIC_SAASBOX_DOMAIN is the application domain you just set.
Build it locally:
You would see successful build output as follows:
If any of these steps have failed, email us at team@saasbox.net so we can improve this guide.
Deploying and running the repo
It is easier to run it directly on the internet for the first time so we skip local set up to get to the demo by deploying it. You will find the tunnel set up later in this guide for local development.
Setting up Vercel
Install Vercel CLI:
Deploy project to Vercel
You need to deploy to production with --prod for assets to be referenced correctly via the CDN
Follow the Vercel questions on the above prompt to deploy. You can fork the project in Github, then link it to your Vercel project and deployment.
Set up Vercel
Copy the environment variables we defined earlier in .env.local to the Vercel project under vercel.com, settings > environment variables:
Set up SaaSBox
We now need to configure SaaSBox and add Vercel domain as an external application.
Enable External domains under SaaSBox:
Copy the generated public Vercel domain for your deployment for the Application External Domain field and save it. In the above example we use https://nextjs-nextui-saasbox.vercel.app
Thats it! You are done setting up your NextJS based SaaS starting point.
Visiting your SaaS with logged in user and plan information
You can now visit your NextJS application deployment as an authenticated user from https://yourapp.saasbox.net. Let's take a look at an example for how it works.
Step 1: Visit your application and log in.
Step 2: Press the Go To App button in the lower left side of your dashboard.
As the administrator you are sent to the admin dashboard and need to explicitly press the Go To App button to go to your application.
Regular users will be directly sent to your NextJS application after login or sign up.
Step 3: Thats it! You should now be in your standalone NextJS SaaS application, with the logged in user information shown in the top right and top left profile area.
How does it work?
Your application entry point is hosted at https://yourdomain.saasbox.net. You can check out our domains guide to configure your own domain.
Your NextJS application resides and is mounted at https://yourdomain.saasbox.net/app. The sbox-auth-next package in the starter template takes care of creating and syncing user sessions on the NextJS application.
Enabling Stripe Subscriptions, Plans, Checkout, and Customer Portal
This is a single step, check out our Plans guide.
TLDR: As soon as you save your Stripe Keys, the portal and checkout will be enabled. When you have a subscribed user, their Stripe subscription object is available to your NextJS instance, and will display in your NextJS dashboard.
Demo
Check out how everything above works with a demo application we have created at https://nextjs-nextui.saasbox.net
username: testuser2000@saasbox.net
password: testuser2000
Local Setup
If you are ready to use this as your SaaS solution and prefer to build your NextJS application locally, here is a short guide on enabling this.
Setup NGrok Tunnel
NGrok will enable your application running on your developer machine (localhost) to be accessible from the Internet. This includes sending and receiving requests to and from your SaaSBox application living in https://your-application.saasbox.net
Sign up to ngrok at ngrok.com
Go through Setup & Installation at dashboard.ngrok.com
As of today the setup includes:
(Alternatively, you can install ngrok via npm with the bash command sudo npm install -g ngrok)
Download ngrok-version.zip on your local computer.
Open up a terminal and unzip ngrok-version.zip. You will now see the ngrok executable in the current directory.
Set up your auth token issuing the command:
./ngrok authtoken <your token>Run Ngrok:
./ngrok http 3000Take a note of the tunnel address that has been created and shown on your terminal, e.g.:
https://c00b-47-224-207-237.ngrok.io -> http://localhost:3000
Setup SaaSBox to redirect logged in users to your application
Setting up the connection from SaaSBox to your app running locally
Turn on "Enable External Domain for SaaS Application" setting in the App Location view.
Paste your NGrok URL (e.g.
https://c00b-47-224-207-237.ngrok.io)in the input box for Application External DomainSave.
This will create the connection from https://your-application.saasbox.net to your standalone application running at https://localhost:3000, using the NGrok tunnel we created, e.g. in this example at the temporary address https://c00b-47-224-207-237.ngrok.io
Your users will log in, sign up and subscribe to plans at the public https://your-application.saasbox.net address and then be redirected to your application hosted on your local machine.
Last updated
