supabase/web/docs/guides/integrations/vercel.mdx

---
id: vercel
title: 'Vercel'
description: The fastest way to get up and running with an application that uses Supabase is with Vercel's Next.js starter and Supabase integration.
---

This guide steps through using Vercel's dashboard to create a Next.js project integrated with Supabase. To further streamline the process, we will be using the Next.js starter template, which can be automatically forked to a new GitHub repo, without leaving the dashboard!

If you don’t have a Vercel account, create one [here](https://vercel.com/signup).

## Step 1: Create a Supabase project

This guide could use an existing Supabase project, but to create the `todo` demo from scratch, navigate to [Supabase](https://app.supabase.com/), click `Sign In` and authenticate with GitHub to login or register a new account.

From the Supabase dashboard, click `New project` and select an organization.

> Note: You may need to create an organization first.

Give your project a `name`, `password`, select a `region` close to your potential users and click `Create new project`.

![Create a Supabase project](/img/guides/integrations/vercel/create-supabase-project.png)

Supabase will take a couple of minutes to configure the infrastructure.

Once this is finished, navigate to `SQL Editor` from the sidebar menu and click `New query`.

This will create a new SQL snippet called "New Query". Copy and paste the following and click `Run`.

```sql
create table todos (
  id bigint generated by default as identity primary key,
  title text,
  is_complete boolean default false,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

alter table todos enable row level security;

create policy "Anyone can view todos" on todos for
    select using (true);

create policy "Anyone can add new todos" on todos for
    insert with check (true);

insert into todos(title)
values
  ('Create Supabase project'),
  ('Create Vercel project'),
  ('Install Supabase integration');
```

This will create a new todos table, enable row level security, add policies for selecting and inserting data, and add some example rows.

> Note: To simplify this example, we are allowing anyone to `select` and `insert` rows on the `todos` table. Usually, these actions would be locked down to only allow logged in users to perform them. Check out [this video](https://www.youtube.com/watch?v=Ow_Uzedfohk) to learn more about Row Level Security and policies.

## Step 2: Create Vercel project

From your [Vercel dashboard](https://vercel.com/dashboard), click `New Project`.

![Create new Vercel project](/img/guides/integrations/vercel/create-vercel-project.png)

Under the `Clone Template` menu, click `Next.js`.

![Clone Next.js template](/img/guides/integrations/vercel/clone-next-js-template.png)

In the `Create Git Repository` section, click `GitHub`, select your username under `GIT SCOPE`, enter a name for your project, choose whether you want your repo `private` or `public`, and click `Create`.

![New GitHub repo settings](/img/guides/integrations/vercel/repo-settings.png)

This will create a new GitHub repository, clone and commit the Next.js starter project, then build and deploy your new project to Vercel.

Once you have been redirected to the `Congratulations` screen, click `Go to Dashboard`.

Navigate to `Settings`, `Integrations`, then click `Browse Marketplace`.

Search for `Supabase` and click the Supabase integration.

![Supabase integration](/img/guides/integrations/vercel/supabase-integration.png)

Click `Add Integration`. Select your account from the `Vercel Scope` dropdown, and click `CONTINUE`.

![Choose scope](/img/guides/integrations/vercel/choose-scope.png)

Choose `Specific Projects` and select your new Vercel project from the dropdown, and click `Add Integration`.

![Choose project](/img/guides/integrations/vercel/choose-project.png)

From the Supabase popup, select your new Vercel Project and Supabase project from the dropdowns.

![Supabase integration](/img/guides/integrations/vercel/link-vercel-to-supabase.png)

## Step 3: Clone GitHub repo

The fastest way to get this project running locally is to clone the repo that Vercel created for us.

Navigate back to the Vercel project `Overview` page, and click `View Git Repository`.

![Vercel Project Dashboard](/img/guides/integrations/vercel/vercel-project-dashboard.png)

This will open the GitHub repo. From here, click the arrow next to `Code` and copy the url from the dropdown.

![GitHub repo url](/img/guides/integrations/vercel/github-project-url.png)

Open a terminal window or CLI and run the following command to clone the GitHub repo.

```bash
git clone your-repo-url.git
```

Open the project in your code editor of choice, and update the contents of `pages/index.js` to the following:

```jsx
import styles from '../styles/Home.module.css'

export default function Home() {
  return <div className={styles.container}>working</div>
}
```

Run a local development server.

```bash
npm run dev
```

Navigate to `http://localhost:3000` to confirm the project is "working".

## Step 4: Pull environment variables from Vercel

First, we need to login to Vercel using their CLI tool.

```bash
npx vercel login
```

This will ask if we are happy to install `vercel`. Type `y` and hit `Enter`.

We will then need to authenticate Vercel by selecting `Continue with GitHub`.

This will open a browser window where you need to authenticate with your GitHub account.

Next, we need to link our Vercel project.

```bash
npx vercel link
```

Step through the prompts to link the Vercel project.

![Link project from Vercel](/img/guides/integrations/vercel/vercel-link.png)

Copy the environment variables from our Vercel project.

```bash
npx vercel env pull
```

This will create a `.env` file containing our Supabase environment variables. Rename this file to `.env.local` to automatically ignore it from git.

## Step 5: Install Supabase.js

Install the `supabase-js` library.

```bash
npm i @supabase/supabase-js
```

Create a new file called `/utils/supabase.js` and add the following.

```jsx
import { createClient } from '@supabase/supabase-js'

export default createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)
```

Create a new file called `/components/NewTodo.js` and add the following.

```jsx
import { useState } from 'react'
import supabase from '../utils/supabase'

export default ({ reload }) => {
  const [title, setTitle] = useState('')

  const addTodo = async (e) => {
    e.preventDefault()
    await supabase.from('todos').insert({ title })
    reload()
    setTitle('')
  }

  return (
    <form onSubmit={addTodo}>
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
    </form>
  )
}
```

This component will be responsible for writing a new `todo` to Supabase.

Let's import our new component in `pages/index.js` and display a list of todos.

```jsx
import { useState, useEffect } from 'react'
import styles from '../styles/Home.module.css'
import supabase from '../utils/supabase'
import NewTodo from '../components/NewTodo'

export default function Home() {
  const [todos, setTodos] = useState([])

  const fetchTodos = async () => {
    const { data } = await supabase.from('todos').select('*')
    setTodos(data)
  }

  useEffect(() => {
    fetchTodos()
  }, [])

  return (
    <div className={styles.container}>
      <NewTodo reload={fetchTodos} />
      {todos.map((todo) => (
        <p key={todo.id}>{todo.title}</p>
      ))}
    </div>
  )
}
```

## Resources

- [Vercel official website](https://vercel.com).
- [Vercel blog](https://vercel.com/blog).
- [Vercel docs](https://vercel.com/docs).
- [Vercel Integration docs](https://vercel.com/docs/integrations)