1. Create Project

Create a new supabase project at database.new

2. Set Environment Variables

Rename .env.example to .env.local and add:

NEXT_PUBLIC_SUPABASE_URL=[YOUR_PROJECT_URL]
NEXT_PUBLIC_SUPABASE_ANON_KEY=[YOUR_ANON_KEY]

Find these values in your Supabase project's API Settings

3. Create a Table

Run this SQL in your Supabase SQL Editor:

create table notes (
  id bigserial primary key,
  title text
);

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

4. Generate Types

You can generate types for your project by running the following command:

yarn supabase:types

Run this in your project root with the Supabase CLI installed. Add to package.json:

"supabase:types": "supabase gen types typescript --project-id [YOUR_PROJECT_ID] > ./utils/supabase/supabase.d.ts"

5. Query Data

Server Component (app/(protected)/notes/server/page.tsx)

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

export default async function NotesPage() {
  const supabase = await createClient();
  const { data: notes } = await supabase.from('notes').select();
  return <pre>{JSON.stringify(notes, null, 2)}</pre>;
}

Client Component (app/(protected)/notes/client/page.tsx)

'use client';

import { createClient } from '@/utils/supabase/client';
import { useEffect, useState } from 'react';

export default function NotesPage() {
  const [notes, setNotes] = useState(null);
  const supabase = createClient();

  useEffect(() => {
    const getData = async () => {
      const { data } = await supabase.from('notes').select();
      setNotes(data);
    };
    getData();
  }, []);

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

That's it! Your Next.js app is now connected to Supabase.