#Practical Build
14 posts
Build an Online Shop with Next.js #5: Order Confirmation and Deployment
Close the user flow with an order confirmation page and deploy to Vercel to put the shop on the real internet. We wrap up by examining the limits of in-memory storage and exactly what needs fixing before this could become a production service.
Build an Online Shop with Next.js #4: Checkout and Payment Simulation
Create orders with Server Actions and simulate success/failure with a fake payment gateway. We also cover practical patterns for handling form state with useActionState and useFormStatus.
Build an Online Shop with Next.js #3: Shopping Cart
Manage shopping cart state with a client Context and localStorage. We cover a persistent cart that survives refresh, quantity changes, total calculation, and a hydration-safe pattern.
Build an Online Shop with Next.js #1: Getting Started and Design
Build an online shop from scratch with the Next.js App Router. The first post covers requirements, tech decisions, route structure, the product data model, and project setup.
Build a Blog with Next.js #5: SEO and Deployment (Wrap-up)
Optimize for search engines with the metadata API, build sitemap and RSS, and deploy to Vercel. Wrap up with a retrospective across the series and the 31 React posts in total.
Build a Blog with Next.js #4: Comments (Server Actions)
Let users comment on each post. Handle form submission and validation with Server Actions, polish UX with useActionState, and apply the patterns to a real build.
Build a Blog with Next.js #3: Tags and Search
Add a per-tag post list page and a search feature driven by URL query parameters. Two dynamic-route patterns (generateStaticParams vs searchParams) appear together.
Build a Blog with Next.js #2: Post List and Detail Page
Read MDX files directly with fs in a Server Component, compile the body in a dynamic route, and render it on the screen — the core flow.
Build a Blog with Next.js #1: Getting Started and Design
Apply Server Components and Server Actions from the Modern React series to a real project. The first post covers requirements, data model, folder structure, and MDX setup.
Build a Todo App with React #5: Persistence and Wrap-up
Persist data with localStorage so it survives a refresh, then wrap up with a series retrospective and pointers to next steps.
Build a Todo App with React #4: Editing
Double-click an item to enter inline edit mode, save with Enter / cancel with Escape, and meet useRef for the first time.
Build a Todo App with React #3: Filtering
Add All / Active / Completed filters and a bulk operation that deletes all completed items.