Query Supabase Data from Next.js Server Components

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

• Supabase Auth Helpers for Next.js
• Supabase.js docs
• Row Level Security