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.


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)


Get a SaaSBox account by signing up at and make sure to set up for a free plan at


Get a Vercel account at 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:

git clone

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 if interested.

Set up your SaaSBox domain at

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.

// .env.local
// Add values WITHOUT "" quotes.
SAASBOX_APP_ID=<application id>

# Example:

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 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:

npm install -g vercel

Deploy project to 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.

Set up Vercel

Copy the environment variables we defined earlier in .env.local to the Vercel project under, 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

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 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 You can check out our domains guide to configure your own domain.

Your NextJS application resides and is mounted at 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.


Check out how everything above works with a demo application we have created at


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

  • Sign up to ngrok at

  • Go through Setup & Installation at

As of today the setup includes:

(Alternatively, you can install ngrok via npm with the bash command sudo npm install -g ngrok)

  1. Download on your local computer.

  2. Open up a terminal and unzip 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.: -> http://localhost:3000

Setup SaaSBox to redirect logged in users to your application

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. in the input box for Application External Domain

  3. Save.

This will create the connection from to your standalone application running at https://localhost:3000, using the NGrok tunnel we created, e.g. in this example at the temporary address

Your users will log in, sign up and subscribe to plans at the public address and then be redirected to your application hosted on your local machine.

Last updated