React and Next.js

Lessons

1. 1

   Why Next.js Won: What It Is and Why You'll Use It

   Free

   Understand what a JavaScript framework is, why React and Next.js dominate web development in 2025, and what the rest of the subtrack will teach you.

   Beginner·25 min
2. 2

   Project Setup with create-next-app

   Scaffold a fresh Next.js + TypeScript + Tailwind app with create-next-app and make your first edit.

   Beginner·35 min
3. 3

   App Router: Layouts, Pages, Loading, Errors

   Build a multi-page Next.js app with file-based routing, nested layouts, and automatic loading + error boundaries.

   Beginner·50 min
4. 4

   React Hooks

   Use useState, useEffect, useContext, and your own custom hooks fluently — and respect the Rules of Hooks.

   Beginner·55 min
5. 5

   Server Components vs Client Components

   Decide which type of component to use, fetch data on the server without an API call, and add the 'use client' boundary correctly.

   Intermediate·50 min
6. 6

   API Routes in Next.js

   Build REST endpoints inside your Next.js app with route.ts files, validate input with Zod, and call them from client components.

   Intermediate·45 min
7. 7

   Connecting Supabase: Database and Auth

   Stand up Supabase, query Postgres with Row-Level Security, and wire up email/password authentication end to end.

   Intermediate·60 min
8. 8

   Deploying to Vercel in Under 5 Minutes

   Push to GitHub, deploy to Vercel, configure environment variables per environment, and add a custom domain.

   Beginner·30 min
9. 9

   Capstone: Full-Stack App on Vercel

   Pick a project brief and build a real, deployed, portfolio-worthy Next.js + Supabase + Tailwind app with a custom domain.

   Intermediate·240 min
10. 10

    Job Readiness: Junior Frontend and Full-Stack Roles

    Translate your new skills into a job application: real titles, a competitive resume, interview answers, certifications, and a portfolio checklist.

    Beginner·40 min