Udemy, Coursera, 2U/edX Face Lawsuits Over Meta Pixel Use

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

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

via egghead.io

Go to class Write review

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

Taught by

Jon Meyers

Reviews

4.9 rating at egghead.io based on 51 ratings

Start your review of Build a Twitter Clone with the Next.js App Router and Supabase

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.