#Next.js
17 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 #2: Product Catalog
Build the product list and detail pages with Server Components, add a category filter with searchParams, and cover next/image, generateStaticParams, and notFound in one pass.
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.
Docker in Practice #3: React/Next.js Build Containers — standalone and the NEXT_PUBLIC Place
Wrapping a Next.js app into a container. The deps → build → runner three-stage pattern with standalone output, the build-time-baking issue with NEXT_PUBLIC env vars, the static-export option, and hosting a Vite SPA with nginx.
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.
Modern React + Next.js #6 Server Actions and Forms (Wrap-up)
Use Server Actions to handle form submission and server-data mutation simply, polish the UX with useActionState/useFormStatus, and reflect on the series.