Use Supabase with Next.js

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

Set up a Supabase project

Head over to database.new and create a new Supabase project.

When your project is up and running, navigate 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 notes table with some sample data.

SQL_EDITOR

 -- Create the table
 create table notes (
   id serial primary key,
   title text
 );

 -- Insert some sample data
 insert into notes (title)
 values
   ('Today I created a Supabase project.'),
   ('I added some data and queried it from Next.js.'),
   ('It was awesome!');

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

npx 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

NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

Query Supabase data from Next.js

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

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

app/notes/page.tsx

utils/supabase/server.ts

  import { createClient } from '@/utils/supabase/server';

  export default async function Notes() {
    const supabase = createClient();
    const { data: notes } = await supabase.from("notes").select();

    return <pre>{JSON.stringify(notes, null, 2)}</pre>
  }

Start the app

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