---
title: Deploy Next.js and Userbase with Vercel
description: Create a Todo app with Next.js and Userbase and deploy it live with Vercel.
url: /kb/guide/deploying-next-and-userbase-with-vercel
canonical_url: "https://vercel.com/kb/guide/deploying-next-and-userbase-with-vercel"
published: 2025-11-03
last_updated: 2026-07-16
authors: Allen Hai
related:
  - /docs/concepts/deployments/git
  - /docs/concepts/deployments/preview-deployments
  - /docs/concepts/deployments/environments
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

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

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

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

```bash
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.