Next.js

Build one 'blog + comments' app across 5 real stages: pages/layouts → a like button (server/client components) → a comments API (Route Handlers) → a comment form (Server Actions) → deployment. Learn to read and review AI-written full-stack Next.js code.

Stages

1. Build a blog + comments · Step 1 page/layout

   ~90 minSubscription needed

   Read how real page.tsx/layout.tsx code and folder structure map to URL routing. This project builds one real blog app across 5 lessons — this site itself is actually built with the App Router.

2. Build a blog + comments · Step 2 like button

   ~110 minSubscription needed

   Add a real like button to the Step 1 blog post. See what the "use client" boundary actually separates, and why passing a function as a prop from a Server Component fails.

3. Build a blog + comments · Step 3 comments API

   ~100 minSubscription needed

   Build a real REST API with a Route Handler so people can comment on the blog post. GET/POST handlers, request/response handling, and diagnosing common runtime errors.

4. Build a blog + comments · Step 4 comment form

   ~100 minSubscription needed

   Replace the Step 3 comments API with a real comment form built on a Server Action. Understand how calling a server function directly differs from the old fetch-based approach.

5. Build a blog + comments · Step 5 deployment

   ~100 minSubscription needed

   Understand the difference between static generation (SSG), server rendering (SSR), and ISR, and actually deploy the blog+comments app — the wrap-up lesson for this 5-step project.