Master Next.js 15 - Build and Deploy an E-Commerce Project

Set up a Next.js 15 project from zero to hero quickly, configuring Postgres with Docker, installing required dependencies, and running the app locally in under 15 minutes.

Learn the basics of Docker, containers, and images, and how Docker Compose defines multi-container apps with a Postgres database.

Open your project in Visual Studio Code and explore optional GitHub Copilot features. Learn to create a docker compose file and run a local Postgres database.

Learn to run a Postgres database with Docker compose, configuring a Postgres 16 Alpine image, environment variables, and a persistent volume, then verify via Docker commands.

Recap the section's setup by running a Next.js 15 app with a Postgres database via Docker and Prisma ORM, and troubleshoot common container and credential issues.

Explore server components in Next.js, render on the server to access resources securely, and implement a responsive home page grid using Tailwind with a page-suffixed component.

highlights type safety with static type checking via TypeScript and introduces mock data in lib to define a product type and a two-item array for the home page.

Explore Next.js 15's image component that automatically optimizes images to reduce bandwidth and egress fees, with lazy loading and webp conversion; includes configuring domains and using fill for responsive sizing.

Learn to use the Next.js image sizes property to serve viewport-appropriate image widths, optimize bandwidth, and adapt layouts from mobile to large screens with retina support.

Creates a responsive product grid with a reusable product card and an optimized Next.js image component for responsive images and bandwidth, and introduces file-based routing and server components by default.

connect to the database with prisma and create prisma models to replace the mocked data, fetch the data, and display it in the next.js app.

Define a simple product model with id, name, and description in Prisma schema, migrate to Postgres, and verify with Prisma Studio.

Create and relate category and product models using a one-to-many relationship, add category id to products, migrate with Prisma, and seed data to populate the grid on the main page.

Create a TypeScript seeding script using tsx to populate the database from mock data, add a seed command in package.json, and run it with Prisma in a Next.js app.

Learn how shadcn/ui leverages open-source base components like radix primitives with a unified, tailwind-friendly style, offering copyable, customizable components you can tailor to your brand.

Discover how loading UI and streaming in Next.js keeps pages interactive while data loads. Create a loading js file with a skeleton and indicator that is replaced by real data.

Create a loading UI for Next.js 15 with a root layout and next/link navigation. Simulate a three-second delay and build a loading.tsx that mirrors the page layout for products.

Use the Chack'n UI skeleton component to build a product card skeleton that mirrors the layout. Display six skeleton cards in a grid to improve perceived performance while data loads.

Add usable pagination UI in a Next.js app by replacing anchor tags with the Next.js Link component, wiring Qaqun pagination components, and computing total pages with Promise.all to render links.

An overview of an e-commerce page utilizing suspense and server components to show loading indicators during parameter changes, with the newly added Shatkin UI components and a simple pagination implementation.

Create a dynamic product page in Next.js 15 using a [slug] route under app/product, fetch by slug, handle not found with next/navigation, and enable client-side linking for slug-based products.

Load the product and its related category using include to improve the product page ui, and render a centered CDN card with a bold price, category, and description.

Learn to implement a product page loading state using skeletons, replacing content with skeleton blocks, sizing headers and description, and simulating delay with a sleep function to test loading.

Convert the product page to a responsive two-column grid with Tailwind, placing the image beside details and using Next.js image with conditional rendering and priority loading.

Add a product inventory field to the data model, migrate the database, seed inventory values, verify with Prisma Studio, and update the UI to reflect inventory.

Master Next.js 15 by building a responsive product inventory UI and image sizing, showing availability with an in-stock badge and quantity, using a flex layout and conditional rendering.

Add a placeholder add-to-cart button that adapts to inventory, displaying add to cart or out of stock, inside a container with a Lucid React shopping cart icon.

Learn to implement dark and light mode in Next.js with Next Themes and tailwind CSS variables, wrapping the layout with a client theme provider and honoring system preferences.

Implement a theme toggle using a theme provider, enabling system, light, and dark modes. Integrate dropdown components from Shatkin UI and store the chosen theme in local storage.

Build a responsive navigation bar in next.js by creating a nav bar component, integrating it into layout, and styling a left shop link with categories.

Add icons to the navigation bar's right side using a ghost variant button with icon size, wrapping Next.js links to search and cart pages, plus a mode toggle for theme.

Design a mobile only navigation menu for small screens, featuring a logo, main items, a search box, and a GitHub icon, with a hamburger trigger using a sheet component.

Build a navigation sheet in Next.js 15, enabling left or right sliding menus with a header and close button, wrapping links in a sheet close component to close on navigation.

Enhance the homepage layout by fixing header-content alignment, removing the unnecessary loading UI, applying top-and-bottom padding, and adding a footer with a dashed top border and centered muted text.

Create a custom breadcrumbs component to render home, category, and product paths. Install, map items with labels and cref, add separators, and ensure accessibility.

Fix layout issues by removing max width and standardizing container padding, and add a breadcrumbs skeleton tsx using Shatkin's skeleton with three items for loading UI.

Implement a browser-stored dark/light mode switch and a responsive navigation bar with search and cart indicators, plus a mobile sheet menu with breadcrumbs using Qaqun components for the ecommerce store.

Implement a persistent search trigger and visual input in the navigation bar for an e-commerce store. Install the input component from CDN and build it for smaller devices.

Implement a client-side search input in next.js 15 that syncs with the query parameter, updates on parameter changes, and redirects to a search results page showing matched products.

Create a dummy search page in a Next.js 15 project and wire a search input to a query parameter using use search params and useEffect in a controlled component.

Build a Next.js 15 search results page with reusable layouts, breadcrumbs showing the query, and suspense-loaded product results fetched via Prisma with an or condition on name or description.

Build a category page in Next.js 15 by reusing the search page, routing with a category slug, and fetching category details to filter products and update breadcrumbs.

Introduce a basic sorting feature for category and search pages by using an optional sort parameter mapped to Prisma order by, and pass it to the products component.

Build universal sorting controls in a Next.js 15 layout using a client component that generates sort links while preserving search params and highlighting the active sort.

Learn how to implement consistent sorting across search and category pages by using search params, refetching data, and a reusable products component with an optional sort parameter.

Demonstrates extracting shared code in a Next.js 15 app by using a reusable products component and a server action to handle category, search, and pagination queries, improving testability and reuse.

Create a reusable client product list component and extract a server action getProducts to handle optional pagination, query, and category slug parameters, enabling consistent product fetching across pages.

Implement a cart system for anonymous users using a browser cookie to store a basket id, fetch or create the cart, and manage cart items with quantity updates and deduplication.

Define custom TypeScript types from Prisma models to type a cart with items and products, ensuring type safety and reliable UI data via a get cart utility using cookies.

Implement a getCart server action in Next.js 15 that reads the cart id from cookies via Next headers and fetches the cart with Prisma, including items and product data.

Implement a getOrCreateCart utility to fetch or create a cart using the cookie id, with internal helpers and a secure http-only cookie.

Build a reusable add to cart button as a client component, connect it to a server action, and manage cart state with a cookie in a Next.js 15 app.

Implement a navbar cart indicator that fetches cart data from the database via a server component and displays the cart size using the cookie-stored cart ID.

Learn to use unstable cache in Next.js to cache data fetching, apply keys and tags for cart data, trigger revalidation after updates, and auto-refresh server components to update user interface.

Implement dynamic caching for the cart using unstable cache with card id keys and cookie data, then revalidate by tag after cart changes to update the cart counter.