Back
Vercel

Vercel

Vercel
Vercel
Vercel

Overview

Vercel enables developers to build and publish wonderful things. They build products for developers and designers. And those who aspire to become one. This makes it the perfect tool for building web apps with Supabase.

Documentation

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.

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

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.


_20
create table todos (
_20
id bigint generated by default as identity primary key,
_20
title text,
_20
is_complete boolean default false,
_20
created_at timestamp with time zone default timezone('utc'::text, now()) not null
_20
);
_20
_20
alter table todos enable row level security;
_20
_20
create policy "Anyone can view todos" on todos for
_20
select using (true);
_20
_20
create policy "Anyone can add new todos" on todos for
_20
insert with check (true);
_20
_20
insert into todos(title)
_20
values
_20
('Create Supabase project'),
_20
('Create Vercel project'),
_20
('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 to learn more about Row Level Security and policies.

Step 2: Create Vercel project

From your Vercel dashboard, click New Project.

Create new Vercel project

Under the Clone Template menu, click Next.js.

Clone Next.js template

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

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

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

Choose scope

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

Choose project

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

Supabase integration

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

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

GitHub repo url

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


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


_10
import styles from '../styles/Home.module.css'
_10
_10
export default function Home() {
_10
return <div className={styles.container}>working</div>
_10
}

Run a local development server.


_10
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.


_10
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.


_10
npx vercel link

Step through the prompts to link the Vercel project.

Link project from Vercel

Copy the environment variables from our Vercel project.


_10
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.


_10
npm i @supabase/supabase-js

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


_10
import { createClient } from '@supabase/supabase-js'
_10
_10
export default createClient(
_10
process.env.NEXT_PUBLIC_SUPABASE_URL,
_10
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
_10
)

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


_19
import { useState } from 'react'
_19
import supabase from '../utils/supabase'
_19
_19
export default ({ reload }) => {
_19
const [title, setTitle] = useState('')
_19
_19
const addTodo = async (e) => {
_19
e.preventDefault()
_19
await supabase.from('todos').insert({ title })
_19
reload()
_19
setTitle('')
_19
}
_19
_19
return (
_19
<form onSubmit={addTodo}>
_19
<input value={title} onChange={(e) => setTitle(e.target.value)} />
_19
</form>
_19
)
_19
}

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.


_26
import { useState, useEffect } from 'react'
_26
import styles from '../styles/Home.module.css'
_26
import supabase from '../utils/supabase'
_26
import NewTodo from '../components/NewTodo'
_26
_26
export default function Home() {
_26
const [todos, setTodos] = useState([])
_26
_26
const fetchTodos = async () => {
_26
const { data } = await supabase.from('todos').select('*')
_26
setTodos(data)
_26
}
_26
_26
useEffect(() => {
_26
fetchTodos()
_26
}, [])
_26
_26
return (
_26
<div className={styles.container}>
_26
<NewTodo reload={fetchTodos} />
_26
{todos.map((todo) => (
_26
<p key={todo.id}>{todo.title}</p>
_26
))}
_26
</div>
_26
)
_26
}

Resources

Details

DeveloperSupabase
CategoryDevTools
Websitevercel.com

Get started with Vercel and Supabase.