Getting Started

Use Supabase with Next.js

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

1

Create a Supabase project

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

Alternatively, you can create a project using the Management API:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# First, get your access token from https://supabase.com/dashboard/account/tokensexport SUPABASE_ACCESS_TOKEN="your-access-token"# List your organizations to get the organization IDcurl -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \  https://api.supabase.com/v1/organizations# Create a new project (replace <org-id> with your organization ID)curl -X POST https://api.supabase.com/v1/projects \  -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \  -H "Content-Type: application/json" \  -d '{    "organization_id": "<org-id>",    "name": "My Project",    "region": "us-east-1",    "db_pass": "<your-secure-password>"  }'

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
-- 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:

1
2
3
4
create policy "public can read instruments"on public.instrumentsfor select to anonusing (true);
2

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:

1
npx create-next-app -e with-supabase
3

Declare Supabase Environment Variables

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

Project URL
Anon key
1
2
NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>
4

Create Supabase client

Create a new file at utils/supabase/server.ts and populate with the following.

This creates a Supabase client, using the credentials from the env.local file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { createServerClient } from '@supabase/ssr'import { cookies } from 'next/headers'export async function createClient() {  const cookieStore = await cookies()  return createServerClient(    process.env.NEXT_PUBLIC_SUPABASE_URL!,    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,    {      cookies: {        getAll() {          return cookieStore.getAll()        },        setAll(cookiesToSet) {          try {            cookiesToSet.forEach(({ name, value, options }) =>              cookieStore.set(name, value, options)            )          } catch {            // The `setAll` method was called from a Server Component.            // This can be ignored if you have middleware refreshing            // user sessions.          }        },      },    }  )}
5

Query Supabase data from Next.js

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

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

1
2
3
4
5
6
7
8
import { 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>}
6

Start the app

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

1
npm run dev

Next steps