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.

Set up a Next.js ecommerce project with TypeScript, ESLint, and Tailwind using Create Next App; configure app router and assets for a storefront.

Set up Chack'n UI for a Next.js project by initializing, generating components.json, and installing components with the add command, including a button in the components/ui folder.

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.

Import sample data from a TypeScript db folder to render a product list on the home page, display a responsive grid, and support a limit while preparing database seeding.

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.

Fetch latest products from the database using server actions in a Next.js ecommerce app, convert Prisma objects to plain JavaScript objects, and integrate with the home page.

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.

Explain how ESLint and TypeScript flag unused variables during builds and deployments, and show strategies like ignoring, or selectively disabling no-unused-vars in development.

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.

Learn how to seed user data in a Next.js ecommerce app by adding admin and regular users, hashing passwords with bcrypt ts edge, and running a seed script with Prisma.

Configure next auth for a next.js ecommerce app using the credentials provider and Prisma adapter, with jwt sessions, sign-in routes, and essential env vars in an auth.ts.

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.

Learn to implement a sign up flow with a Zod schema for name, email, password, and confirm password, hash the password with bcrypt, create user with Prisma, and sign in.

Create a sign up page and form by adapting the existing sign in flow, including sign up defaults, a sign up form component, and error handling enhancements.

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.

Create a client add-to-cart component that submits a cart item via a server action, wiring in id, name, slug, price, quantity, and image, with toast feedback and navigation to cart.

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 manage quantity and multiple products in the cart by updating existing items, adding new ones, validating stock, updating prices, and saving changes with prisma.

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.

Build a Next.js cart page and a client cart table, fetch the cart with get my cart, and enable adding/removing items with a responsive grid layout and toast feedback.

Install the shadcn ui table for the cart, configure table head, body, rows, and cells with product links, images, quantity controls, and price, including transition and toasts.

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.

Build a reusable checkout steps component in a Next.js ecommerce app, mapping four steps (user login, shipping address, payment method, place order) with responsive styling and current-step highlighting.

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.

Add a payment method selection (PayPal, Stripe, or cash on delivery) and place order page, plus order details page; create Prisma schemas for orders and items and create order action.

Build a payment method page with env-driven methods (PayPal, Stripe, cash on delivery), validate the method with a zod schema, and update the user’s payment method via a Prisma-backed action.

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 zod validation schemas from Prisma schemas for insert order and insert order item, infer TypeScript types, and begin the place order action on the cart checkout page.

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.

Implement a place order form that submits to the create order action, handles success or error redirects, and shows a loading state with status icons and router-based navigation.

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.

Build a client-side order details table in a Next.js app, displaying order id, shipping address, payment and delivery status, and an order items table with a price summary.

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.

Generate an access token from the PayPal API to authorize actions, then set up PayPal functions to create orders and capture payments in a TypeScript module.

Write a Jest unit test to verify PayPal generate access token returns a non-empty string. Configure ts-jest and dot env setup for the test environment.

Learn to implement PayPal checkout flow in Next.js by creating orders and capturing payments, sending bearer access tokens, building purchase units with USD amounts, handling responses, and 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.

Approve PayPal order and update the database to paid with status completed and payment result details, including paid at, and revalidate the order page after payment.

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.

Create a Zod update profile schema for name and email validation. Implement an update profile action that updates the current user's name using Prisma, while email remains unchanged for now.

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.

Create an admin overview page that fetches the order summary, validates admin access, and displays total revenue, sales, customers, and products alongside recent sales data.

Learn to add a monthly sales chart to the admin dashboard of a Next.js ecommerce platform using Read Charts, a bar chart, responsive container, and dynamic sales data.

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.

Implement a delete order action and a reusable delete dialogue component using alert dialog and use transition for live feedback, with Prisma deletion and page revalidation.

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.