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.
Standalone NextJS user dashboard with open source React components, user authentication and plan information.
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).
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.
Get a Vercel account at https://vercel.com. It doesn't need to be a paid account.
Clone the free and MIT licensed starter repository at: https://github.com/getsaasbox/nextjs-nextui-sboxauth-example
git clone [email protected]:getsaasbox/nextjs-nextui-sboxauth-example.git
Install its dependencies:
cd nextjs-nextui-sboxauth-example
npm install
Note: A Tailwind UI version of the user dashboard is also available. Please contact us at [email protected] if interested.
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 a subdomain that you can use for a while for this demo. Save it.
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.
// .env.local
// Add values WITHOUT "" quotes.
SAASBOX_APP_ID=<application id>
SAASBOX_API_KEY=<api key>
SAASBOX_JWT_SECRET=<JWT secret>
# Example: https://nextjs-nextui.saasbox.net
NEXT_PUBLIC_SAASBOX_DOMAIN=<your saasbox url>
Build it locally:
npm run build
You would see successful build output as follows:
[ ... ]
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
info - Creating an optimized production build .%
If any of these steps have failed, email us at [email protected] so we can improve this guide.
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.
Install Vercel CLI:
npm install -g vercel
You need to deploy to production with --prod for assets to be referenced correctly via the CDN
vercel deploy --prod
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.
Copy the environment variables we defined earlier in .env.local to the Vercel project under vercel.com, settings > environment variables:
Copy over environment variables
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.
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.
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.
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.
Check out how everything above works with a demo application we have created at https://nextjs-nextui.saasbox.net
username: [email protected]
password: testuser2000
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.
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
- 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)- 1.Download ngrok-version.zip on your local computer.
- 2.Open up a terminal and unzip ngrok-version.zip. You will now see the ngrok executable in the current directory.
- 3.Set up your auth token issuing the command:
./ngrok authtoken <your token> - 4.Run Ngrok:
./ngrok http 3000 - 5.Take 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
Setting up the connection from SaaSBox to your app running locally
- 1.Turn on "Enable External Domain for SaaS Application" setting in the App Location view.
- 2.Paste your NGrok URL (e.g.
https://c00b-47-224-207-237.ngrok.io)in the input box for Application External Domain - 3.Save.
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.ioYour 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.