Build a Twitter Clone with the Next.js App Router and Supabase

Overview

Next.js App router is ushering in the next era of web development. The App router leverages React Server components for the first time. React Server components are run only on the server and introduce a completely new set of decisions for React developers. When you work with server components, you can access your backend directly. Combine that with Next.js Server Actions and you have some powerful patterns at your disposal to access and mutate data just like you need it. With these powers come new concepts and mental models you’ll need to navigate. One of the immediate challenges you’ll run into is declaring `“use client”` or `“use server”` in your components. In this course, you will be introduced to these new patterns through building a twitter clone application using the **[Next.js App Router](https://nextjs.org/docs/app)** and **[Supabase](https://supabase.com/).** As you build out twitter-like features, you’ll learn to navigate these new concepts implementing a full stack app. On the Next.js side of things, you’ll learn about: - Client Components - Server Components - Route Handlers - Server Actions - Middleware - Implementing Optimistic UI And on the backend (via Supabase) you’ll learn about: - Configuring Supabase Auth to use cookies - Using Row Level Security (RLS) policies to implement Authorization - Querying data across multiple tables - Introspecting PostgreSQL schema to generate TypeScript definitions with the Supabase CLI - Subscribing to realtime database changes This course is a deep dive into modern web development and I'm very excited to see what you're going to build on the other side! 🚀

Syllabus

Create a New Supabase Project and Basic PostgreSQL Schema
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 Supabase 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 Intersection Types for Transformed Supabase Data with Typescript
Implement Optimistic UI with the React useOptimistic hook in Next.js
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