Use Supabase with Next.js

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

Set up a Supabase project with sample data

Create a new project in the Supabase Dashboard.

After your project is ready, create a table in your Supabase database using the SQL Editor in the Dashboard.

Use the following SQL statement to create a countries table with some sample data.

SQL_EDITOR

 -- Create the table
 create table countries (
   id serial primary key,
   name text not null
 );
 -- Insert some sample data into the table
 insert into countries (name) values ('United States');
 insert into countries (name) values ('Canada');
 insert into countries (name) values ('Mexico');

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 my-app && cd my-app

Declare Supabase Environment Variables

Rename .env.local.example to .env.local and populate with your project's URL and Anon Key.

.env.local

  NEXT_PUBLIC_SUPABASE_URL=your-project-url
  NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Query Supabase data from Next.js

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

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

app/countries/page.tsx

  import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
  import { cookies } from "next/headers";
  export default async function Index() {
    const cookieStore = cookies()
    const supabase = createServerComponentClient({ cookies: () => cookieStore })
    const { data: countries } = await supabase.from("countries").select();
    return (
      <ul className="my-auto text-foreground">
        {countries?.map((country) => (
          <li key={country.id}>{country.name}</li>
        ))}
      </ul>
    );
  }

Start the app

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

Terminal

npm run dev

Edit this page on GitHub