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.
12345678910111213-- Create the tablecreate table instruments ( id bigint primary key generated always as identity, name text not null);-- Insert some sample data into the tableinsert into instruments (name)values ('violin'), ('viola'), ('cello');alter table instruments enable row level security;
Make the data in your table publicly readable by adding an RLS policy:
1234create policy "public can read instruments"on public.instrumentsfor select to anonusing (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:
1npx 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
12NEXT_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/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.
12345678import { createClient } from '@/utils/supabase/server';export default async function Instruments() { const supabase = await createClient(); const { data: instruments } = await supabase.from("instruments").select(); return <pre>{JSON.stringify(instruments, null, 2)}</pre>}
Start the app
Run the development server, go to http://localhost:3000/instruments in a browser and you should see the list of instruments.
1npm run dev
Next steps
- Set up Auth for your app
- Insert more data into your database
- Upload and serve static files using Storage