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

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


Jon Meyers

1h 19m closed-captioning
20 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
people completed
Published a year ago
Updated a year ago

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 and Supabase.

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! 🚀

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Course Content

1h 19m • 20 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.