This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Note：

1. 使用next-auth 向 Next.js 应用程序添加身份验证；文档链接https://next-auth.js.org/getting-started/example
2. 使用headless ui

Lessons

1. Introduction
2. Install tools
3. Create Next App
4. Publish to GitHub

List products

1. add data.js
2. add images
3. render products

Create Product Details

1. create product page
2. create 3 columns
3. show image in first column
4. show product info in second column
5. show add to cart action on third column
6. add styles

cart page

1. create cart.js
2. use context to get cart items
3. list items in cart items
4. redirect to cart screen after add to cart

handle changing cart items

1. add select box for quantity
2. handle select box change

Save cart items (保存购物车列表)

1. install js-cookie package（npm install js-cookie）
2. sava and retrieve cart items in cookies

create Login Form

1. install react hook form
2. create input boxes
3. add login button

connect to mongoDB

1. install mongoose
2. install mongodb or use mongodb atlas
3. save connection url in .env file
4. create db utils file
5. create sample users

create Login Api

1. install next-auth
2. create nextauth.js
3. implement signin
4. use signin in login form

Add User Menu

1. check user authentication
2. install headless-ui
3. show user menu

create shipping screen

1. display address fields
2. save address in context

create payment method screen

1. display payment method
2. save payment method in context

seed sample products

1. insert sample products to mongodb
2. load products from db in home and product screen
3. check product count in stock in add to cart

load products from mongodb

1. load products in home page from mongodb
2. load products in product page from mongodb
3. use product api to chcek count in stock in add to cart