# Deploy Next.js and Userbase with Vercel

**Author:** Allen Hai

---

[Userbase](https://userbase.com/) is the easiest way to add user accounts and data persistence to your static site.

All Userbase features are accessible through a [JavaScript SDK](https://userbase.com/docs/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 [on the Userbase dashboard](https://v1.userbase.com/#create-admin).

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](https://github.com/zeit/next.js/tree/canary/examples/with-userbase) and moving into the project directory:

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

## 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`

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

`yarn dev`

## Step 4: Deploying to Production

To deploy your Next.js + Userbase app with [Vercel for Git](https://vercel.com/docs/concepts/deployments/git), 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 provider](https://vercel.com/import/git?env=NEXT_PUBLIC_USERBASE_APP_ID) of choice.

After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/preview-deployments#), and all changes made to the [Production Branch](https://vercel.com/docs/concepts/deployments/git#production-branch) (commonly "main") will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production).

Once deployed, you will get a URL to see your app live, such as the following: [https://next-userbase.vercel.app](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.

---

[View full KB sitemap](/kb/sitemap.md)