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.

Set up development environment to build an e-commerce platform, install Node.js, scaffold a Next.js 15 project with npx, enabling TypeScript, ESLint, Tailwind CSS, and the app router, then start dev.

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.

Discover how Next.js 15 uses file-based routing in the app router, mapping pages to the app folder, creating home and products routes, and implementing dynamic routes with [id] using page.tsx.

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.

Display products as cards in a responsive grid on the homepage, using a product card component that accepts a product prop and maps mock products with a unique key.

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.

Learn how adding more products interacts with a responsive grid, compare image sizes from 745kB to 177kB, and leverage browser lazy loading to reduce egress data.

Build a reusable utils function to format prices with Intl.NumberFormat, supporting configurable currency and removing the hard-coded dollar for consistent price display across the app.

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.

Seed the database using a Prisma client, deleting existing data and inserting categories like electronics, clothing, and home, then verify with Prisma Studio.

Add products in the seeding script and update the schema with price, image, and a unique slug. Run migrations and seed the database.

Learn how to manage the Prisma client in Next.js during development, preserving the database connection across hot reloads with a global object and a dedicated prisma.ts module.

Learn how Next.js 15 server components render HTML on the server, fetch products directly from the database with Prisma, and render conditionally based on data presence.

Troubleshoot Next.js and Prisma errors by checking Docker containers and database connections, learn how to fetch data asynchronously, and use Prisma db push for development before migrations.

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.

Set up Qaqun components in a Next.js project and install key pieces. Learn to configure skeleton, cart, and badge via CDN, with Tailwind CSS variables for customization.

Replace the product card with a card component, adding a header, title, description, and footer for price and inventory, then fine-tune image overlap, padding, and overflow for dark mode readiness.

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.

Explore implementing pagination for a Next.js 15 product list using search params to set the current page and page size, with Prisma findMany and skip.

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.

Understand how search params and dynamic APIs force dynamic rendering at request time, causing non-cacheable pages and potential database traffic; decide when to use static pages or incremental static regeneration.

Learn to use React Suspense with Next.js to show loading skeletons during search params changes by extracting a reusable products skeleton and wrapping product fetching in a dedicated component.

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.

Learn next.js 15 server actions: functions run on the server regardless of call location, use the server directive, and you can call them from client components.

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.

Customize the Next.js 404 not found page by creating a not-found file at the pages level and use the not found function to display a default or custom page.

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.

Implement config-based metadata in Next.js 15 to improve SEO and social sharing with static and dynamic metadata using a generate metadata function and open graph tags.

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 transform a static product list with pagination into a clickable, responsive product page showing photo, price, category, stock status, and a not found 404 page for missing urls.

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 mobile navigation by creating a mobile nav component and using a sheet trigger, showing the mobile menu on small screens and hiding it on md and up.

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.

Create a search input component in the navbar, wrapped in a full-width form with a search icon and a placeholder, visible from the md breakpoint and ready for search logic.

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.

Fixes several ui/ux issues by ensuring the search input appears on mobile, stabilizing layout with minimum card and breadcrumb heights, and clarifying pagination active states using tailwind tweaks.

Combine search and category browsing to improve product discovery, then create category pages with sorting options like cheapest or most recently added.

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.

Upgrade product discovery with a left category sidebar powered by suspense that fetches all categories from the database and highlights the active category, enabling fast, interactive pages.

Demonstrate building a nested layout in Next.js 15 to share common user interface for discovery pages, with a left category list and right sorting links via a dedicated search layout.

Explore a practical Next.js pattern: wrap a client category sidebar inside a server component that fetches data and passes it as props, enabling route-aware highlighting with suspense support.

Wrap a client category sidebar inside a server component, fetch data, and pass a categories prop; enable client usage with the use params hook and a use client directive.

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.

Refactor pages to load products through a product list server wrapper using the get products action, enabling centralized loading and pagination across pages.

Design and migrate a cart database schema using Prisma, creating cart and cart item models with relationships, unique constraints, and indexes to support a persistent shopping cart.

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.

Implement add to cart using get or create cart, default quantity to one, and validate input. Update existing items via Prisma; otherwise create a new item with product IDs.

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.

Learn how to prevent the cart indicator from blocking page load by loading in the background with a skeleton component and suspense, providing a smooth user experience.