Deploy Next.js and Userbase with Vercel

Create a Todo app with Next.js and Userbase and deploy it live with Vercel.

Userbase is the easiest way to add user accounts and data persistence to your static site.

All Userbase features are accessible through a JavaScript SDK, directly from the browser, without requiring a backend.

Step 1: Create A Userbase Account

First, you'll need to create a Userbase account. If you don't already have one, you can create one here.

After creating your account, make a note of your App ID. You'll store it later as an environment variable for your project.

Step 2: Set up a New Next.js Project

Set up a Next.js and Userbase project by initializing the project template and moving into the project directory:

npm init next-app --example with-userbase userbase-todo-app && cd userbase-todo-app

Initializing a Next.js + Userbase app and entering into the project directory.

Step 3: Adding an Environment Variable

For your app to function correctly, you will need to provide it with an environment variable.

Note: You will need to set this environment variable when importing the project into Vercel as well.

The scaffolded template provides you with a .env.local.example file. Rename the file to .env.local and set the value of the environment variable inside .env.local to your Userbase App ID from Step 1.

Your .env.local file will look like this:

 NEXT_PUBLIC_USERBASE_APP_ID=YOUR_APP_ID

Updating the .env.local file to provide an environment variable to the app during development.

You are now able to run and develop your Next.js + Userbase app locally with the following command:

yarn dev

Running the app locally with the yarn dev command.

Step 4: Deploying to Production

To deploy your Next.js + Userbase app with a Vercel for Git Integration, make sure it has been pushed to a Git repository.

During the import process, you will need to add the following environment variable:

  • NEXT_PUBLIC_USERBASE_APP_ID

Import the project into Vercel using your Git Integration of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your app live, such as the following: https://next-userbase.vercel.app

Set up a Next.js + Userbase app with a few clicks using the Deploy button, and create a Git repository for it in the process for automatic deployments for your updates.



Written By
Written by coetrycoetry