Supabase and Next.js Starter Template

The fastest way to build apps with Supabase and Next.js

Next steps

  1. 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. Head over to the Table Editor for your Supabase project to create a table and insert some example data. If you're stuck for creativity, you can copy and paste the following into the SQL Editor and click RUN!

    create table notes (
      id serial 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!');
  3. 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. You're ready to launch your product to the world! 🚀