01 Next.js 电商开发 - Introduction

type

Post

status

Published

date

Jan 3, 2026

slug

nextjs-ec-001

summary

01. Introduction

1. Welcome To The Course

欢迎来到我的 Next.js 电商课程。这是一个基于项目的课程，也是我目前为止最高级的项目。我实际上计划在生产环境中使用我们构建的这个平台来销售我妻子的艺术产品。我会定制设计，但计划使用这个基础作为她的网站。

所以我想谈谈这个课程以及它的内容，并尝试回答你可能遇到的关于应该参加我的哪些课程的问题。

现在尽管这是我目前为止最高级的项目，但我仍然会一步步带你完成。我会详细解释所有内容，几乎没有复制粘贴。我知道有些人对我和复制粘贴 HTML 标记和 Tailwind CSS 类感到沮丧，但对于这个项目，我们将使用 ShadCN UI，这是一个包含各种 UI 元素和组件的组件库。所以我们将把所有内容都打出来。

你们中的很多人可能想知道应该参加这个课程还是我的 Next.js 从零开始课程，我们在那里构建一个房产租赁网站。这真的取决于你的技能水平。如果你从未使用过 Next.js，我可能会建议从那个课程开始，因为我解释了基础知识，如基于文件的路由、操作和数据获取。这个课程更加项目特定，我向你展示如何一起使用很多东西，包括 TypeScript、Zod、Prisma 等等。如果你之前用 Next.js 构建过任何东西，那么我可能会建议这个课程。特别是我们使用最新版本的地方。另外，如果你讨厌复制粘贴标记，那么这个课程适合你。

我要提醒你这是一个大项目。这不是你几天就能完成的事情。根据你的时间表，如果你从头到尾构建它，可能需要几周到几个月的时间。我希望这成为你可以引以为豪的东西。即使它来自一个课程，创建这样的东西仍然不容易。我希望你期待每天坐下来继续构建它。当你完成时，你可以将其展示在你的作品集上，或者在生产环境中使用它，或者你想用它做什么都可以。

关于我们将使用的技术，在下一个视频中，我将介绍整个技术栈和所有包，但主要的一些是 Next.js 15 配合 React 19、Prisma、PostgreSQL 和 TypeScript。所以所有要求我在课程中使用 TypeScript 的人，就是这个了。

Next.js vs MERN

现在我知道你们中的很多人可能会问这个 "prostore" 项目和我的 MERN 栈电商 "proshop" 项目之间有什么区别。嗯，首先，它是一个完全不同的应用程序，具有不同的功能。但是 MERN 和 Next.js 是两种完全不同的架构。Next.js 是服务器端渲染的，这意味着服务器渲染 HTML 标记并将其发送到浏览器。MERN 是客户端渲染的，这意味着浏览器渲染 HTML 标记。

使用 MERN 栈，你有完全独立的前端和后端。Next.js 是一个全栈框架，结合了前端和后端，在过去几年中变得极其流行。使用传统 MERN 的独立前端和后端并不是一件坏事，但在我看来，对于这样的项目来说，这不是最好的架构。我认为 MERN 更有意义的地方是，如果你需要一个独立的 API，因为你可能计划拥有 React 前端以及某种移动应用程序 UI 或类似的东西。如果像这样的单个项目，我认为在大多数情况下 Next.js 是更好的选择。你有基于文件的路由、服务器操作，如果需要，你可以创建 API 路由。

你将学到什么？

那么你实际上会学到什么？嗯，你将学习如何从零开始构建一个全栈电商网站。涉及如此多的不同技术和包，所以与其说这是一个组件或属性的课程，不如说这是一个你将学习如何实现现实生活功能和特性的课程，你将能够将这些知识应用到自己的项目中。你想添加身份验证、集成 PayPal 或 Stripe、发送电子邮件、上传图像，无论你想要什么。你将拥有这个课程和所有文档可以回去参考。

在下一个视频中，我想介绍整个技术栈和我们将使用的所有包。然后我们将看看实际项目。

2. The Stack

在这个视频中，我想谈谈我们在本课程和项目中将要使用的所有技术。

Next.js 15 & React 19

Next.js 15 上个月刚发布，这就是我们要使用的版本。这个版本使用了目前最新版本的 React，即版本 19。我们在本课程中使用的所有内容都可以与 React 19 正常工作，但在某些情况下，我在安装包时必须添加 --legacy-peer-deps 标志，因为一些第三方库还没有完全更新其依赖项以兼容 React 19。这个标志允许 npm 绕过严格的依赖检查，这样你仍然可以毫无问题地安装和使用这些库。

PostgreSQL 数据库

这次我们不会使用 NoSQL 作为数据库。我们将通过 Vercel 使用 PostgreSQL，这是我们部署项目的地方。Vercel 现在提供由 Neon 管理的云 Postgres 数据库。对于这样的项目来说，这是一个很好的选择。它设置简单，而且你不需要支付任何费用。免费层对于这个项目来说已经足够了。当然，如果你将其投入生产并且有大量流量，你会想要升级到付费计划。

Prisma ORM

我们还将使用 Prisma 作为我们的 ORM。Prisma 是一个 TypeScript 友好的 ORM，使得与数据库一起工作变得容易。如果你想使用像 Planetscale 或其他数据库提供商的东西，你只需要更改 .env 文件中的数据库 URL。其他一切都完全相同。Prisma 让我们可以轻松设置模式、迁移和种子数据。

TypeScript, ES Lint & Zod

我一直被要求做 TypeScript 相关的课程。在这个项目中，我们将大量使用 TypeScript 和 ES Lint。所以你将学习类型安全编程、类型推断、类型守卫等。为了简化事情，我们将使用 Zod，这是一个通过提供验证数据的方式来轻松使用 TypeScript 的库。我们可以为我们的数据创建模式，然后在保存到数据库之前验证它。所以我们甚至不必担心手动编写验证逻辑。

ShadCN UI

对于 UI，我们将使用 ShadCN UI。ShadCN UI 是一个独特的库，允许你选择和选择你想要使用的组件。对于这样的项目来说，这是一个很好的选择，因为它不像 Material UI 或 Chakra UI 那样的完整 UI 库。它更加灵活和可定制。它在底层使用 Tailwind CSS，所以我们可以轻松定制样式。

Next Auth

对于身份验证，我们将使用 Next Auth，在我看来，它比任何其他身份验证库都要好。它易于设置和使用。它也非常灵活和可定制。我们确实在我的 Next.js From Scratch 课程中使用了 Next Auth 与 Google 提供商。这次我们将使用 Bcrypt 加密设置本地电子邮件和密码身份验证。我可能会在未来添加 Magic Link 和 Google 身份验证。我已经有代码了，只是我是否想将其添加到课程中的问题。

React Hook Form

我们将使用的另一个库是 React Hook Form，用于处理表单状态、验证和提交。它非常灵活和可定制，并且与 Zod 配合得很好。我们可以简单地将我们的 Zod 模式传递给 useForm 钩子，它将自动为我们处理验证。

Jest 测试

我们甚至要涉足单元测试。我不想把事情搞得太复杂，所以我们不会做太多，但是当集成 PayPal API 时，我们将编写一些测试来执行诸如生成令牌和验证付款之类的操作。

我们在本课程中还将使用大量其他较小的库和包。

这里是一个快速概述

React Email & Resend - 用于创建电子邮件模板和发送电子邮件

Uploadthing - 用于上传文件。在我们的情况下，产品图像

Lucide React - 图标库

Next Themes - 用于管理主题。我们将有应用程序的浅色模式和深色模式版本

Recharts - 用于创建图表。我们将在我们的管理仪表板中使用它

PayPal React SDK - 用于集成 PayPal 付款

Stripe - 用于集成 Stripe 付款

Slugify - 用于为产品创建 slug

Zod - 用于验证数据

Embla Carousel - 我们将使用它和 ShadCN 的轮播组件的组合在轮播中显示特色产品

Vercel 部署

我们还将熟悉 Vercel 平台。我们实际上将在课程中很早就部署，然后从那里进行持续部署。所以我们可以直接推送到 Github 并让它自动部署。

如果这听起来很多，别担心。我们将详细讨论所有内容。这不是一个看我编码的课程。我会在进行过程中解释一切。Will、Prateek 和我也将在 Udemy 和 Discord 上提供问答。

在下一课中，我们将看看项目本身。

3. The Project

4. The Environment

5. Premium Docs