Next.js E-Commerce App Full Tutorial with the Best Headless Solution

Published: 20 May 2024
on channel: Lama Dev
118,988
3.7k

Full-stack e-commerce app project with React Next.js, Tailwind, and Wix Headless. Next.js shopping app course with server actions & headless CMS.

Wix Headless - https://www.wix.com/studio/developers...
Wix Headless Docs - https://dev.wix.com/docs/go-headless
Wix Headless Templates - https://www.wix.com/studio/developers...

Join the upcoming React Master Course waitlist - https://list.lama.dev

If it is valuable to you, you can support Lama Dev.
Join:    / @lamadev  
Buy me a coffee: https://www.buymeacoffee.com/lamadev

Join Lama Dev groups

X / Twitter: https://x.com/lamawebdev
Facebook:   / lamadev  
Instagram:   / lamawebdev  
Discord:   / discord  

Source Code

Starter Branch: https://github.com/safak/next-ecommer...
Completed Version: https://github.com/safak/next-ecommer...

00:00 Introduction
07:26 Next.js Installation
09:44 Next.js App Router Creating Pages and Layout
13:32 Next.js Responsive Navbar Menu with Tailwind CSS
25:18 Next.js Search Input
32:40 Responsive Navbar Icons and Modals
42:43 Next.js E-commerce Cart Component Design
53:55 Next.js Slider Tutorial (Create Your Own Slider)
01:06:37 E-commerce App Product List Page Design
01:14:32 Sliding Category List Design
01:19:55 Next.js Footer Component Design
01:29:21 E-commerce App Product List Page with Filters UI Design
01:36:51 E-commerce App Single Page Design
02:02:43 Next.js Wix Headless E-Commerce App Tutorial
02:10:42 Wix E-Commerce Headless Javascript SDK Tutorial
02:20:09 Next.js E-commerce App Fetch Products
02:28:46 Next.js Fetch Data with React Suspense (Loading Component)
02:38:51 E-commerce App Fetch Categories
02:45:11 E-commerce App Fetch a Single Product
02:50:34 Next.js How to Filter Product Options in an E-Commerce App
03:09:57 Next.js Product Quantity and Add to Cart Button
03:15:29 Next.js E-commerce App Filter Products
03:28:30 Next.js Product Page Pagination
03:36:48 Next.js Authentication with Wix Headless
04:20:36 Next.js Wix E-commerce Cart Functionalities
04:26:45 Next.js Zustand Tutorial (E-Commerce Cart State)
04:47:57 Next.js Wix E-commerce Checkout Tutorial
05:01:45 Next.js Wix E-commerce Orders
05:16:35 Next.js Wix E-commerce User Profile Page
05:28:28 Next.js Form Handling with Server Actions
05:42:37 Next.js E-commerce App User Reviews for Products
05:59:29 Outro


Watch video Next.js E-Commerce App Full Tutorial with the Best Headless Solution online without registration, duration hours minute second in high quality. This video was added by user Lama Dev 20 May 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 118,988 once and liked it 3.7 thousand people.