使用 Next.js 13.4 和新的 App Router 构建和部署一个全栈电子商务网站。本教程将引导你利用 Next.js 服务器操作，使用 Prisma 管理数据库，构建一个类似于亚马逊的动态网站，并使用 Next-Auth、MongoDB 和 Google 登录确保用户安全。通过匿名购物车和通过 TailwindCSS 和 DaisyUI 实现的出色 UI 增强用户体验。在 Vercel 上无缝部署，优化页面元数据，使用 React 缓存简化 Prisma 请求，并设置必要的开发者工具，以获得流畅的编码体验。 ⭐️ 代码 & 资源 ⭐️ 起始代码：https://github.com/codinginflow/nextjs-ecommerce/tree/0-Starting-Point tailwind.config.js: https://github.com/codinginflow/nextjs-ecommerce/blob/0-Starting-Point/tailwind.config.js Favicon: https://github.com/codinginflow/nextjs-ecommerce/blob/0-Starting-Point/src/app/favicon.ico Opengraph-image: https://github.com/codinginflow/nextjs-ecommerce/blob/0-Starting-Point/src/app/opengraph-image.png 图像资源: https://github.com/codinginflow/nextjs-ecommerce/tree/0-Starting-Point/src/assets MongoDB Atlas: https://mongodb.ac.cn/atlas/database 添加到购物车按钮与 SVG 图标: https://github.com/codinginflow/nextjs-ecommerce/blob/7-Add-to-Cart-Button/src/app/products/%5Bid%5D/AddToCartButton.tsx 页脚: https://github.com/codinginflow/nextjs-ecommerce/blob/8-Navbar-Footer/src/app/Footer.tsx Google Cloud Console: https://console.cloud.google.com/ 带有用户账户的 Prisma schema: https://github.com/codinginflow/nextjs-ecommerce/blob/10-User-Authentication/prisma/schema.prisma 带有 SVG 图标的用户菜单按钮: https://github.com/codinginflow/nextjs-ecommerce/blob/10-User-Authentication/src/app/Navbar/UserMenuButton.tsx 分页栏: https://github.com/codinginflow/nextjs-ecommerce/blob/12-Pagination/src/components/PaginationBar.tsx ✏️ 课程创建者 @codinginflow 𝑿: https://twitter.com/codinginflow ⭐ 获取他的全栈 NextJS 与 Express & TypeScript 课程: https://codinginflow.com/nextjs 💌 加入他的新闻邮件，获取定期 Web 开发技巧: https://codinginflow.com/newsletter ⭐️ 内容 ⭐️ ⌨️ (0:00:00) 简介 + 先决条件 ⌨️ (0:08:48) 项目设置 ⌨️ (0:28:18) Prisma + MongoDB 设置 ⌨️ (0:45:42) 添加产品页面 (服务器组件中的服务器操作) ⌨️ (1:31:07) 产品列表页面 ⌨️ (2:00:11) 产品详情页面 (generateMetadata + React 缓存) ⌨️ (2:17:14) 添加到购物车按钮 (客户端组件中的服务器操作) ⌨️ (3:01:01) 导航栏 + 页脚 ⌨️ (3:26:38) 购物车页面 ⌨️ (3:53:50) 用户登录 (Next-Auth) ⌨️ (4:33:37) 将用户购物车与匿名购物车合并 ⌨️ (5:01:26) 分页 ⌨️ (5:25:56) 搜索功能 ⌨️ (5:32:48) Prisma 扩展 ⌨️ (5:46:42) 部署 + 社交预览 🎉 感谢我们的 Champion 和 Sponsor 支持者: 👾 davthecoder 👾 jedi-or-sith 👾 南宮千影 👾 Agustín Kussrow 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Justin Hual 👾 Otis Morgan 👾 Oscar Rahnama -- 免费学习编程并获得开发者工作: https://www.freecodecamp.org 阅读数百篇关于编程的文章: https://freecodecamp.org/news ❤️ 本频道的支持来自我们在 Scrimba 的朋友们 – 重新发明互动学习的编码平台: https://scrimba.com/freecodecamp