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, duration hours minute second in high quality that is uploaded to the channel Lama Dev 20 May 2024. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 118,988 times and liked it 3.7 thousand visitors.

4,087