Build a Twitter Clone with the Next.js App Router and Supabase
Jon Meyers
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.
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
You might also like these resources:
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.
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
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.