This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn devOpen 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.
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!
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.
...:
- npx create-next-app nextjs-ecommerce - ...
- npm install -D tailwindcss postcss autoprefixer - ...
- npx tailwindcss init -p - ...
- ... - ...
- npm i -D @types/react - ...
- npm i @heroicons/react - ...
- npm install js-cookie - ...
- npm install react-hook-form - ...
- npm install mongoose - ...
- npm i bcryptjs - ...
- npm i next-auth - ...
- npm i react-toastify - ...
- npm install @headlessui/react - ...
- npm i axios - ...
- npm i @paypal/react-paypal-js - ...
- npm run build - Build for deploying on Vercel
- ... - ...
- npm i [email protected] - ...
- npm i [email protected] - ...
- npm i cloudinary - ...
- ... - ...
... ... - ...
...:
... ... - ...
...:
- ... - ...
- Details Product - @types/react for { useRouter }
- ... - ...
- js-cookie - Save Cart Item
- hydration error - Caused by a mismatch on values from the server and client side. import dynamic from 'next/dynamic'; is the path to solve
- ... - ...
- cloud.mongodb.com - Create db button -> left menu network access add ip address
- cloud.mongodb.com - Left menu Database -> Browse Collections -> Add my own data -> db name same as username nextjs-ecommerce
- cloud.mongodb.com - Left menu Database -> Connect button -> Connect your application -> copy connection string for .env file
- cloud.mongodb.com - Download MongoDb Compass & install -> paste connection string and connect
- utils/db.js - File to connect to cloud.mongodb.com
- ... - ...
- pages/api/seed.js - Simply connect thru MONGODB_URI & Compass, reload
- Loading Products from MongoDB - ...
- Index.js: Load products with getServerSideProps from MongoDB thru db, which must be imported, then db.connect to Product.find().lean() (since it's lean() we'll have to create convertDocToObj in db.js) -----
- utils/db.js: turn doc.id toString with convertDocToObj
- pages/product/[slug].js: create getServerSideProps(context), we get contexts from the params since it's after clicking for specific product. addToCartHandler will request product info thru an autogenerated url, which will require setting up [id].js to service it -----
- pages/api/products/[id].js: Programmatic API, We make handler = async (req, res) to db.connect, Product.findById(req.query.id), db.disconnect, and send(product) back to [slug] in {data}
- Throughtout lesson calls to check product info and countInStock for addToCartHandler() and updateCartHandler()
- ... - ...
... ... - ...
...:
... ... - ...