使用 Next.js 和新的 app router 构建和部署一个全栈电子商务网站。这最初是一个 Next.js 13 教程。但由于 Next.js 14 中没有 API 更改，它仍然完全是最新的。在本教程中，您将学习： - 如何使用 Next.js 服务器 actions 并从服务器组件和客户端组件中调用它们 - 如何使用 Prisma 运行数据库操作和事务，以及如何使用 Prisma 客户端扩展来hook到您的查询 - 如何构建一个功能齐全的电子商务网站，类似于 Amazon.com - 如何使用 Next-Auth、Prisma 适配器、MongoDB 和 Google 登录添加身份验证 - 如何为未经身份验证的用户实现匿名购物车，并将标识符存储在 cookie 中 - 如何使用 TailwindCSS 和 DaisyUI 构建惊人的 UI - 如何将您的项目部署到 Vercel 并为每个页面设置元数据（包括 generateMetadata） - 如何使用 React cache 函数去重 Prisma 请求 - 如何设置 Prettier、Eslint 以及 Prisma 和 TailwindCSS VS Code 扩展等工具，使您的项目易于使用 链接 & 文件： 起始代码: 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 图标的 UserMenuButton: 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 ⭐ 获取我的全栈 Next.js 与 Express & TypeScript 课程: https://codinginflow.com/nextjs ✅ 获取我的免费 React 最佳实践课程: https://www.codinginflow.com/reactbestpractices 💌 加入我的新闻邮件，获取定期的 web 开发技巧: https://codinginflow.com/newsletter 💬 加入我们在 Discord 上的开发者社区: https://codinginflow.com/discord 📣 在社交媒体上关注 Coding in Flow: Twitter: https://twitter.com/codinginflow Instagram: https://instagram.com/codinginflow TikTok: https://tiktok.com/@codinginflow Facebook: https://facebook.com/codinginflow 时间戳: 0:00 - 介绍 + 先决条件 08:04 - 项目设置 27:34 - Prisma + MongoDB 设置 44:58 - 添加产品页面 (服务器组件中的服务器 action) 1:30:23 - 产品列表页面 1:59:27 - 产品详情页面 (generateMetadata + React cache) 2:16:30 - 添加到购物车按钮 (客户端组件中的服务器 action) 3:00:17 - 导航栏 + 页脚 3:25:54 - 购物车页面 3:53:06 - 用户登录 (Next-Auth) 4:32:53 - 将用户购物车与匿名购物车合并 5:00:42 - 分页 5:25:12 - 搜索功能 5:32:04 - Prisma 扩展 5:45:58 - 部署 + 社交预览