Next steps

1. Create some tables and insert some data

   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 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!');

2. Enable Row Level Security (RLS)

   Supabase enables Row Level Security (RLS) by default. To query data from your notes table, you need to add a policy. You can do this in the Table Editor or via the SQL Editor.

   For example, you can run the following SQL to allow public read access:

   alter table notes enable row level security;
   create policy "Allow public read access" on notes
   for select
   using (true);

   You can learn more about RLS in the Supabase docs.

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 '@/lib/supabase/server'
   
   export default async function Page() {
     const supabase = await createClient()
     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 '@/lib/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. Explore the Supabase UI Library

   Head over to the Supabase UI library and try installing some blocks. For example, you can install a Realtime Chat block by running:

   npx shadcn@latest add https://supabase.com/ui/r/realtime-chat-nextjs.json

5. Build in a weekend and scale to millions!

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