Supabase and Next.js Starter Template

Next steps

1. Sign up your first user

   Head over to the Login page and sign up your first user. It's okay if this is just you for now. Your awesome idea will have plenty of users later!

2. Create some tables and insert some data

   Head over to the Table Editor for your Supabase project to create a table using the following into the SQL Editor and click RUN!

   create table
     public.notes (
       id serial,
       title text null,
       user_id uuid not null default auth.uid (),
       constraint notes_pkey primary key (id),
       constraint notes_user_id_fkey foreign key (user_id) references auth.users (id) on update cascade on delete cascade
     ) tablespace pg_default;

   Now you can add/remove data using a Server Component, Client Component, or Client Component with SWR

3. Query Supabase data from Next.js

   To create a Supabase client and query data from an Async Server Component, create a new page.tsx file at /app/notes/page.tsx and add the following.

   import { createClient } from '@/utils/supabase/server'
   import { cookies } from 'next/headers'
   
   export default async function Page() {
     const cookieStore = cookies()
     const supabase = createClient(cookieStore)
     const { data: notes } = await supabase.from('notes').select()
   
     return <pre>{JSON.stringify(notes, null, 2)}</pre>
   }

   Alternatively, you can use a Client Component.

   'use client'
   
   import { createClient } from '@/utils/supabase/client'
   import { useEffect, useState } from 'react'
   
   export default function Page() {
     const [notes, setNotes] = useState<any[] | null>(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>
   }

4. Build in a weekend and scale to millions!

   You're ready to launch your product to the world! 🚀