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.
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:
Declare Supabase Environment Variables
Rename .env.local.example to .env.local and populate with your project's URL and 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.
Start the app
Run the development server, go to http://localhost:3000/notes in a browser and you should see the list of notes.