Next.js Ecommerce 2025 - Shopping Platform From Scratch

Set up a Next.js 15 ecommerce app with Create Next App, shadow UI, and file-based routing, including layout groups, header, footer, and a theme toggle with the next themes package.

Create route groups with a root layout in next.js, embed a shared header and footer, and manage global constants and metadata via a lib/constants file and env variables.

Create header and footer components for a Next.js ecommerce app within a shared header folder. Integrate Lucid React icons, next/image, and next/link with the app name in layout.

Learn to implement a theme mode toggle in a Next.js ecommerce app using next-themes and shadow UI, with a dropdown for system, light, and dark themes.

Create a loading page and a not found page in a Next.js ecommerce app, using tsx/tsx, an animated loader gif, and a client component for navigation.

Implement a responsive sheet menu in a Next.js ecommerce project by adding a sheet component with a trigger and a mobile-only panel that reveals mode toggle, cart, and sign-in options.

Build a reusable product card component in a Next.js ecommerce app using the shadow CDN card UI, displaying product image, brand, name, rating, price, and stock status.

Learn to build a reusable product price component in a Next.js ecommerce app, formatting prices with two decimals, splitting int and float, and applying dynamic styling via a CDN utility.

Set up a cloud Postgres database on Neon via Vercel, configure Prisma models for products and sessions, migrate and seed data, and build the product details page with images.

Set up a Neon cloud Postgres database via Vercel and initialize Prisma. Define models with schema.prisma and prepare migrations for a product-focused ecommerce platform.

Learn how Prisma models define product schemas, generate client, and run migrations to create a product table with fields like id, slug, images, price, createdat, and explore Prisma Studio.

Create a seed script to populate the database with sample products via the prisma client, deleting existing records first. Switch from file-based data to database fetching.

Learn how to use Zod for type-safe schema validation and runtime checks, infer TypeScript types from schemas, and implement product insertion validation and price formatting in a Next.js ecommerce course.

Configure serverless environment for real-world deployment with continuous deployment to vercel. Integrate neon database with a prisma neon adapter and websocket support, using a pool and a production-ready prisma client.

Build a dynamic product details page by fetching a product with its slug, then display images, price, stock badge, and an add-to-cart button in a responsive grid.

Create a product images component for a Next.js ecommerce page with a large main image and clickable thumbnails; map through images, track current with useState, and apply conditional borders.

Deploy incrementally with vercel for continuous deployment by pushing to a github repo and building production locally with npm run build.

Learn authentication in a Next.js ecommerce app using NextAuth and a local JWT flow, bcrypt hashing, Prisma models, and sign in/out with 30-day sessions.

Learn to add Prisma user-related models for authentication, including user, account, session, and verification token, configure UUID keys, relationships, and migrations, and seed initial data.

Set up next auth with a catch-all api route in the app directory to manage sign in, sign out, and sessions behind the scenes, supporting multiple providers.

implement sign in and sign out using next auth, validate a sign in form with zod, and connect the form to server actions while building an authentication page and layout.

Create a dedicated auth layout and a sign in page inside a non-route auth group. Center a narrow sign-in card with a logo linking to the home page.

Create a credentials sign-in form as a separate component on the sign-in page of a Next.js ecommerce app, with labeled email and password fields and a full-width sign-in button.

Hook up the sign in form to the credentials action using use action state and use form status to show pending states and errors.

Implement a callback URL redirect in the sign-in flow by persisting the callback URL with a hidden input and reading search params.

Learn how to implement a user button and sign out in a Next.js ecommerce project, configure next-auth in env variables for production, and integrate a dropdown user menu with initials.

Improve sign up error handling by showing precise messages for existing emails and validation failures. Use a formatError utility to surface Zod and Prisma errors on the sign up page.

Customize the json web token using a jwt callback to add user role and name, forward them to the session, and sync with database for a Next.js ecommerce authentication flow.

Build a cart system with Prisma models and a database table, link guest sessions via NextAuth, and implement add, remove, dynamic quantity with a spinner using the use transition hook.

Define zod schemas for cart item and cart, infer TypeScript types, and implement a Prisma cart model with items and pricing, including session cart id and optional user id.

Implement a Next.js middleware that runs on every request to generate a session cart ID cookie using crypto.randomUUID and attach it to the response, linking the cart regardless of login.

Fetch a product from the database and attach it to the session cart, using the session cart cookie and user id to support guest and signed-in shopping flows.

Add product to the cart and calculate items price, shipping, tax, and total with a round two-decimal precision. Persist cart with prisma and revalidate the product page by slug.

Learn to remove an item from the cart by implementing a remove item from cart function, validate the product with prisma, update the cart, and revalidate the product page.

Pass the cart into the add to cart component using get my cart. Toggle between add and remove from cart based on item existence, showing quantity with minus and plus.

Leverage the useTransition hook to mark non-urgent UI updates as transitions, exposing isPending and startTransition to wrap add to cart and remove from cart, showing a loading spinner while pending.

Build the flow by creating a cart page with a table of items, a currency utility function, and a shipping address page with pre-filled forms and a checkout steps component.

Create a cart subtotal card in a Next.js ecommerce page, formatting currency with Intl.NumberFormat, computing item totals, and enabling a proceed-to-checkout button that routes to shipping address.

Define a shipping address zod schema with required fields and min lengths, infer a TypeScript ShippingAddress type, and scaffold the /shipping-address page with session, cart checks, and user lookup.

Build a shipping address form in a Next.js ecommerce app using React Hook Form and Zod validation, with prefilled address data and Shadow UI components.

Implement an update user address action that validates shipping address data, updates the user record via Prisma, handles errors with toasts, and advances to the payment method page.

Persist a guest cart by transferring the session cart to the signed in user. Read the session cart ID from cookies and reassign it to the user, deleting user carts.

Protect routes by wiring an authorize callback that checks authentication, tests protected paths with regex, and redirects unauthenticated users to sign in before accessing shipping, payment, profile, or admin pages.

Develop a payment method page and form in Next.js, leveraging react-hook-form, session-based user data, a zod schema, and a two-step checkout with highlighted step two.

Create a payment method form with React Hook Form and shadow components, unify checkout steps on the payment page, and render PayPal, Stripe, and cash on delivery with validation.

Define order and order item models in Prisma, using uuid IDs, JSON shipping addresses, decimal prices, and a composite primary key for order items; migrate and view in Prisma Studio.

Create the place order page in a Next.js ecommerce app to summarize cart items, show shipping address and payment method, calculate shipping, tax, and total, and place the order.

Create a server action to submit an order and order items, validating the user session, cart, address, and payment method, then perform a transactional insert and redirect.

Create an order details page in a Next.js ecommerce app by fetching an order by id with Prisma, including order items and the user's name and email.

Develop format utility functions for the Next.js ecommerce 2025 order details page, including id shortening and date time formatting, and ensure cart and order prices render as strings.

Set up a PayPal sandbox, create personal and business accounts, and implement access token, order, and capture functions for PayPal, test with unit tests, then add PayPal buttons using react-paypal-js.

Set up PayPal sandbox testing by creating buyer personal and seller business accounts, then configure client ID, secret, and sandbox API URL in your .env for merchant testing.

Write and run Jest tests to validate PayPal order creation and payment capture in a Next.js ecommerce app, using tokens, mocks, and spies.

Integrate the PayPal order flow into a Next.js ecommerce app by adding a zod-based payment result schema and creating and approving PayPal orders.

Install and integrate the react-paypal-js package to render PayPal buttons with script provider, manage loading via the PayPal script reducer, and implement create and approve handlers with sandbox ID.

Create the user area to view orders and update the profile within its own layout and menu. Implement get user orders action with pagination and a simple update profile form.

Create a user layout in Next.js app that powers /user/orders and /user/profile, add a top bar with a user menu, and implement a main nav highlighting the active page.

this lecture implements a get my orders action that fetches the logged-in user's orders with pagination using a configurable page size from env, calculating skip and total pages.

Create a paginated orders page in Next.js 15 by fetching orders with get my orders, formatting id, date, and amount, and rendering results in a UI table with details links.

learn to build a client-side pagination component for the orders page in a Next.js ecommerce app, using previous and next buttons and a query string url builder.

Build an update profile form in Next.js with a disabled email and editable name, using next-auth session provider, React Hook Form with Zod resolver, in a client component.

Implement profile form submission with react-hook-form, calling update profile and showing error toasts on failure, then update the user session and token name to reflect the new profile name.

Build the admin area to manage products, orders, and customers, with a Richards monthly sales bar chart and overview; enable deleting orders and updating cash-on-delivery orders to paid and delivered.

Clone the user layout for an admin area, add a searchable dashboard at /admin with overview, products, orders, and users, and enforce admin-only access via NextAuth role extension.

Build an admin overview with total revenue, counts for orders, products, and users, plus a monthly sales chart and latest six sales via a get order summary action.

Implement an admin authorization guard in Next.js that checks the user session for an admin role and redirects non-admins to an unauthorized page on each admin page.

Build an admin orders page in a Next.js ecommerce app, implement get all orders with pagination using Prisma, display order data with user names, and enforce admin authentication.

Build admin actions to mark orders paid (cod) and delivered, with proper error handling, database updates, and revalidation of the order page.

Add admin controls to update cash on delivery orders by marking as paid or delivered, with a server-side admin check, the is admin prop, a transition hook, and toast feedback.