Use Supabase with Next.js

Learn how to create a Supabase project, add some sample data, and query from a Next.js app.

Create a Supabase project

Go to database.new and create a new Supabase project.

When your project is up and running, go to the Table Editor, create a new table and insert some data.

Alternatively, you can run the following snippet in your project's SQL Editor. This will create a instruments table with some sample data.

SQL_EDITOR


_13-- Create the table
_13create table instruments (
_13  id bigint primary key generated always as identity,
_13  name text not null
_13);
_13-- Insert some sample data into the table
_13insert into instruments (name)
_13values
_13  ('violin'),
_13  ('viola'),
_13  ('cello');
_13
_13alter table instruments enable row level security;

Make the data in your table publicly readable by adding an RLS policy:

SQL_EDITOR


_10create policy "public can read instruments"
_10on public.instruments
_10for select to anon
_10using (true);

Create a Next.js app

Use the create-next-app command and the with-supabase template, to create a Next.js app pre-configured with:

Terminal


_10npx create-next-app -e with-supabase

Declare Supabase Environment Variables

Rename .env.example to .env.local and populate with your Supabase connection variables:

Project URL

Anon key

.env.local


_10NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
_10NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

Query Supabase data from Next.js

Create a new file at app/instruments/page.tsx and populate with the following.

This will select all the rows from the instruments table in Supabase and render them on the page.

app/instruments/page.tsx

utils/supabase/server.ts


_10  import { createClient } from '@/utils/supabase/server';
_10
_10  export default async function Instruments() {
_10    const supabase = await createClient();
_10    const { data: instruments } = await supabase.from("instruments").select();
_10
_10    return <pre>{JSON.stringify(instruments, null, 2)}</pre>
_10  }

Start the app

Run the development server, go to http://localhost:3000/instruments in a browser and you should see the list of instruments.