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";