Skip to content

Latest commit

 

History

History
95 lines (68 loc) · 5.95 KB

README.md

File metadata and controls

95 lines (68 loc) · 5.95 KB
Raw

🏡 Home

Start a new Supabase project Create a Next.js app with the create-next-app CLI Query Supabase data from Next.js Server Components Create an OAuth app with GitHub Authenticate users with GitHub OAuth using Supabase and Next.js Client Components Refresh session cookie for Next.js Server Components with Middleware Restrict access to authenticated users with RLS policies Dynamically render UI based on user session with SSR in Next.js Client Components Implement Protected Routes for authenticated users with Supabase Auth Generate TypeScript definitions from PostgreSQL schema with Supabase CLI Setup a Foreign Key relationship between PostgreSQL tables Automatically generate a profile for every user with PostgreSQL Function Triggers Run authenticated Server-side mutations with Next.js Server Actions Create a PostgreSQL join table in Supabase Studio Implement dynamic buttons with Next.js Client Components Declare global union types with Typescript Implement Optimistic UI with the Next.js useTransition hook Dynamically update UI with Database changes using Supabase Realtime Style a Twitter clone with Tailwind CSS Deploy Next.js App Router project to production with Vercel

Query Supabase data from Next.js Server Components

📹 Video

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

👉 Next lesson

Enjoying the course? Follow Jon Meyers on Twitter and subscribe to the YouTube channel.