SaaSBox
Search…
⌃K

Create a NextJS SaaS application in 30 minutes

Create a fully functional SaaS example with authentication, subscriptions, database and a user dashboard built with React / NextJS in 30 minutes for free.
This guide shows how to make a standalone full-stack application residing in your app.yourdomain.com address a fully functional, complete SaaS.
Check out the video demo below for all the essential steps and the final result!
Create a NextJS SaaS application in 30 minutes - The entire tutorial with key steps and end result
Functionality you get:
  • User login, sign up, password reset
  • Marketing pages
  • Pricing page and subscriptions
  • User dashboard based on React/NextJS living in app.yourdomain.com (Running on Vercel)
  • Optional database (based on Google Cloud Firestore (Firebase))
While your React / NextJS application will deliver the core logic of your service that you can independently develop, SaaSBox will handle the authentication of your NextJS app (login, sign up, password reset, user profile React component), as well as subscriptions (creating editing plans with nocode, users subscribing to plans)

Setup Requirements

Pre-requisites:

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.
Install npm and NodeJS.

Getting Started

Clone this repo that has a sample dashboard application that has been pre-integrated with SaaSBox authentication package (npm install sbox-auth-next)
Clone the NextJS application starter template at:
git clone https://github.com/getsaasbox/saasbox-sample-nextjs-react-app.git
Install the NextJS dependencies:
cd saasbox-sample-nextjs-react-app
npm install

Set up SaaSBox Environment Variables:

NextJS typically uses a file .env.local for environment variables. Edit it as follows using the information from below:
// .env.local
// Add values WITHOUT "" quotes.
SAASBOX_APP_ID=<application id>
SAASBOX_API_KEY=<api key>
SAASBOX_JWT_SECRET=<JWT secret>
NEXTJS_PUBLIC_SAASBOX_DOMAIN=<your saasbox url> # e.g. https://nextjs-react-saas.saasbox.net
SAASBOX_DOMAIN=<your saasbox url> # e.g. https://nextjs-react-saas.saasbox.net
You may obtain the above information as below.

Your JWT

Your JWT secret is found on the Outbound JWT Secret screen. Generate one if it doesn't exist.

Your Application ID and API Key

Your application ID is listed above and API key is listed in the bottom part of the page

SaaSBox Domain:

This is the domain that you have set up from the "Domain" > "Subdomain" tab for your application. On the free plan you may use any available subdomain, e.g. your-application.saasbox.net. On Paid plans you may set up your own domain with https support.

Run your NextJS application:

npm run dev
You should see your application compile and show a similar screen on your terminal as follows:
At this point we are done setting up our standalone SaaS dashboard application based on React/NextJS.
If you don't wish to use NGrok with a local instance, you can deploy the application to Vercel, and directly use the public Vercel URL for the deployed application. Vercel setup/deployment of a NextJS project can be found at https://vercel.com

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-app.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)
  1. 1.
    Download ngrok-version.zip on your local computer.
  2. 2.
    Open up a terminal and unzip ngrok-version.zip. You will now see the ngrok executable in the current directory.
  3. 3.
    Set up your auth token issuing the command:
    ./ngrok authtoken <your token>
  4. 4.
    Run Ngrok:
    ./ngrok http 3000
  5. 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

Why do we do this again?

Your NextJS application running on http://localhost:3000 will be accessible on the internet at the tunnel endpoint created at https://c00b-47-224-207-237.ngrok.io

Setup SaaSBox to redirect logged in users to your application

This step 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 https://your-application.saasbox.net and then be redirected to your standalone dashboard.
Let's set this up:
Setting up the connection from SaaSBox to Your app
  1. 1.
    Turn on "Enable External Domain for SaaS Application" setting in the App Location screen.
  2. 2.
    Paste your NGrok URL in the input box for Application External Domain
  3. 3.
    Save.
This setting will make sure that any logged in user will be sent to your application, instead of the user dashboard area inside SaaSBox.

Visiting your SaaS with logged in user and plan information

You can now visit your standalone application hosted at localhost:3000 as a logged in user from your SaaSBox application residing in https://your-application.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 redirected to your admin dashboard and need to explicitly press the Go To App button to go to your application.
Standard users will be directly sent to your application after login or sign up.
Step 3: Thats it! You should now be in your standalone SaaS application, with the logged in user information shown in the lower left bottom profile area, and the subscription plan information is also available to your application in the user object.

Demo

Check out how everything above works with a demo application we have created at https://nextjs-react-saas.saasbox.net
password: testuser2000
See how your logged in user looks like in your standalone NextJS application deployed to Vercel.
This standalone NextJS application is deployed at https://saasbox-sample-nextjs-react-app.vercel.app and it takes the user and subscription information from the application deployed at saasbox.net.

Conclusion

You can build a SaaS application using SaaSBox + Vercel almost for free, leveraging standalone app hosting from Vercel, and hosting everything else (marketing, login, payments) on SaaSBox.