1. 3
    Query Supabase Data from Next.js Server Components
    3m 34s

Query Supabase Data from Next.js Server Components

InstructorJon Meyers

Share this video with your friends

Send Tweet

Our Supabase project is a hosted PostgreSQL database. In this lesson, we install the Supabase Auth Helpers and Supabase.js npm packages, and configure environment variables to query data from Supabase:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

These values can be found in your Supabase project's API Settings.

Additionally, we create a new Supabase instance using the createServerComponentClient function, then make our Server Component Async and suspend its rendering until our request for Supabase data resolves.

Lastly, we implement a Row Level Security (RLS) policy to enable read access for the tweets table.

Code Snippets

Install Supabase packages

npm i @supabase/auth-helpers-nextjs @supabase/supabase-js

Import createServerComponentClient function

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";

Create Supabase client in Server Component

const supabase = createServerComponentClient({ cookies });

Fetch data from Supabase

const { data: tweets } = await supabase.from("tweets").select();

Pretty print data with JSON.stringify

<pre>{JSON.stringify(tweets, null, 2)}</pre>

Enable read access with RLS policy

create policy "anyone can select tweets" ON "public"."tweets"
as permissive for select
to public
using (true);

Resources

Xuefeng Wu
~ a year ago

Hi, the <pre> element should be nested inside a <div> element, otherwise hydration error occurs. And another thing is I need to run 'npm add -D encoding', otherwise I got warn in my console.