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.
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);
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.