next tailwind amazona

构建NextJS电子商务网站，例如亚马逊

• 技术：NextJS 13，下一个身份验证4
• UI：tailwind，Chart.js，React-chartjs
• DB：Mongodb，猫鼬
• 付款：贝宝，条纹
• 内容托管：云
• 部署：Github，Vercel，MongoDB Atlas

资源

• YouTube视频：https：//youtu.be/_iblyr5mrza
• 演示网站：https：//next-tailwind-amazona.vercel.app
• 源代码：https：//github.com/basir/next-tailwind-amazona
• 完整课程：basir.thinkific.com

你会学到什么

• NextJS基础知识，例如设置项目，在页面和数据获取之间导航
• NextJS高级主题，例如动态路由，图像优化，SSG和SSR
• 使用自定义主题，动画和旋转木马建立响应式网站的尾风CSS框架
• ReactJ包括分解组件，上下文API和钩子
• 下一个验证包来验证客户和管理用户
• MongoDB和Mongoose保存和检索产品，订单和用户等数据
• 贝宝开发人员API进行在线付款
• 在诸如Vercel和Netlify之类的服务器上部署Web应用程序

完整的课程

在Thinkific：https：//basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=save90上获得90％的折扣：

本地运行

1. 克隆回购

    $ git clone [email protected]:basir/next-tailwind-amazona.git
    $ cd next-tailwind-amazona

2. 创建.env文件

   • 重复.env.example并将其重命名为.env

3. 设置MongoDB

   • 当地的蒙古德
   • 从这里安装
   • 在.env文件中更新mongodb_uri = mongodb：// localhost/amazamaona
   • 或Atlas Cloud MongoDB
   • 在https://cloud.mongodb.com上创建数据库
   • 在.env文件中更新mongodb_uri = mongodb+srv：// your-db-connection

4. 安装并运行

     npm install
     npm run dev

5. 种子数据

   • 在浏览器上运行此功能：http：// localhost：5000/api/seed
   • 它返回管理员电子邮件和密码以及6个示例产品

6. 管理员登录

   • 运行http：// localhost：3000/登录
   • 输入管理电子邮件和密码，然后单击登录

教训

1. 介绍
2. 安装工具
3. 创建下一个应用程序
4. 发布到Github
5. 创建网站布局
   1. 创建布局组件
   2. 添加标题
   3. 添加主部分
   4. 添加页脚
   5. 添加尾风课
6. 列出产品
   1. 添加data.js
   2. 添加图像
   3. 渲染产品
7. 创建产品详细信息
   1. 创建产品页面
   2. 创建3列
   3. 在第一列中显示图像
   4. 在第二列中显示产品信息
   5. 显示第三列上的添加到购物车动作
   6. 添加样式
8. 处理添加到购物车
   1. 定义反应上下文
   2. 定义购物车项目状态
   3. 创建ADDD到购物车动作
   4. 添加还原器
   5. 创建商店提供商
   6. 处理添加到购物车按钮
9. 创建购物车页面
   1. 创建购物车
   2. 使用上下文获取购物车项目
   3. 列出购物车项目中的项目
   4. 添加到购物车之后，重定向到购物车屏幕
10. 在购物车中更新数量
    1. 添加选择框以进行数量
    2. 处理选择框更改
11. 保存购物车项目
    1. 安装JS-Cookie软件包
    2. 在饼干中保存和retre式购物车
12. 创建登录表单
    1. 安装react钩形形式
    2. 创建输入框
    3. 添加登录按钮
13. 连接到MongoDB
    1. 安装猫鼬
    2. 安装MongoDB或使用MongoDB Atlas
    3. 将连接URL保存在.env文件中
    4. 创建DB Utils文件
    5. 创建示例用户
14. 创建登录API
    1. 安装下一个作者
    2. 创建NextAuth.js
    3. 实施标志
    4. 在登录表格中使用Signin
15. 添加用户菜单
    1. 检查用户身份验证
    2. 安装Headlessui
    3. 显示用户菜单
16. 创建运输屏幕
    1. 显示地址字段
    2. 在上下文中保存地址
17. 创建付款方式屏幕
    1. Dispaly付款方式
    2. 在上下文中保存付款方式
18. 种子样品
    1. 在猫鼬中创建产品模型
    2. 将样品产品插入MongoDB
19. 加载产品蒙古
    1. 从MongoDB加载产品中的产品
    2. 从MongoDB加载产品页面中的产品
    3. 使用产品API检查库存计数，此外
20. 创建位置订单屏幕
    1. 显示运输地址
    2. 显示付款方式
    3. 显示订单项目
    4. 暗示创建顺序
21. 创建订单屏幕
    1. 实施后端API以获取订单详细信息
    2. 从后端加载订单数据
    3. 显示订单详细信息
22. 创建注册屏幕
    1. 添加注册API
    2. 创建注册页面
    3. 在表格上调用API提交
23. PayPal支付订单
    1. 添加贝宝按钮
    2. 处理付款
    3. 创建后端API
    4. 更新订单状态
24. 创建订单历史记录屏幕
    1. 创建我的订单API
    2. 创建订单历史记录组件
    3. 获取订单并显示
25. 在Vercel上发布
    1. 创建Vercel帐户
    2. 连接到github
    3. 在env vars中设置下一个auth和mongodb db
    4. 将代码推到github
26. 更新用户配置文件
    1. 创建个人资料屏幕
    2. 显示用户信息
    3. 处理更新用户信息
27. 创建管理仪表板
    1. 创建管理员菜单
    2. 创建仪表板屏幕
    3. 实施管理摘要API
28. 管理员的订单
    1. 创建订单页面
    2. 创建订单API
    3. 在页面中使用API
29. 交付管理订单
    1. 创建交付API
    2. 添加交货按钮
    3. 实施点击处理程序
30. 列出管理产品
    1. 创建产品页面
    2. 创建产品API
    3. 在页面中使用API
31. 创建产品编辑页面
    1. 创建编辑页面
    2. 为产品创建API
    3. 以形式显示产品数据
32. 上载产品图像
    1. 创建云帐户
    2. 获取云键
    3. 创建上传API
    4. 在编辑页面中上传文件
33. 创建和删除产品
    1. 添加创建产品按钮
    2. 构建新产品API
    3. 添加处理程序以删除
    4. 实施删除API
34. 列出管理用户
    1. 创建用户页面
    2. 创建用户API
    3. 在页面中使用API
35. 加入旋转木马
    1. 创建特色产品
    2. 馈送旋转木马数据
    3. 显示流行产品
36. 创建搜索页面
    1. 创建过滤器
    2. 列出产品
    3. 显示过滤器