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.

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.

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.

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.

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.

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.

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.

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.

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.