type
Post
status
Published
date
Feb 6, 2026
slug
nextjs-shopping-platform-001
summary
Use Next 15, React 19, TypeScript, PostgreSQL and Prisma to build a real-world ecommerce website
tags
Next.js
category
编程学习
icon
password
1-2. Welcome To The Course & The Stack
打造功能齐全的购物平台“Prostore”，含评论、PayPal/Stripe支付、邮件收据等功能
一、核心技术栈
技术类别 | 具体工具/版本 | 关键说明 |
前端框架 | Next.js v15、React v19 | Next.js 15为上月新发布版本，React 19为当前最新版；部分第三方库需用特定参数绕过依赖检查以适配React 19 |
类型安全与校验 | TypeScript、ESLint、Zod | 强类型编程，Zod用于数据验证（无需手动写验证逻辑，可与表单库联动） |
数据库与ORM | PostgreSQL（Neon管理）、Prisma | 通过Vercell使用Neon的PostgreSQL（免费层足够项目用）；Prisma支持多数据库，更换仅需改.env文件URL |
UI组件库 | ShadCN UI（基于Tailwind CSS） | 按需安装组件，灵活性高，支持Tailwind样式自定义，区别于Material UI等完整库 |
身份验证 | Next Auth、bcrypt | 实现本地邮箱密码认证（bcrypt加密），未来可能添加魔术链接、Google认证 |
表单处理 | React Hook Form | 处理表单状态/验证/提交，与Zod兼容，可自动实现表单验证 |
支付集成 | PayPal API、Stripe API | 后续会集成两种支付方式，PayPal部分将用Jest做单元测试（生成令牌、验证付款） |
其他工具 | Uploadthing（图片上传）、Resend（邮件） | Uploadthing处理产品图片上传，Resend发送购买邮件收据 |
二、项目部署与测试
- 部署平台：Vercell（Next.js官方推荐，支持持续部署，课程初期即部署，区别于常规“最后部署”流程）
- 单元测试：Jest（仅针对关键功能，如PayPal API的令牌生成、付款验证，不做复杂测试）
三、结构（核心）
- 基础搭建：创建应用、设置ShadCN UI、实现布局/主题切换/404页面
- 数据层：PostgreSQL+Prisma配置、模型创建、数据种子与查询
- 核心功能：用户认证（登录/注册）、购物车系统、结账流程（地址/付款方式）
- 支付与订单：PayPal/Stripe集成、订单管理、支付状态同步
- 管理端：管理员仪表板、产品/用户管理、搜索与筛选功能
- 优化与扩展：评论系统、邮件通知、主页组件完善
3. The Project
📋 项目概述
- 项目名称：Prostore
- 技术栈：Next.js、TypeScript、Postgres、Prisma、ShadCN UI
- 图片上传服务：Uploadthing
- 支付服务：PayPal、Stripe
🏠 首页功能
- 头部组件：Logo、类别菜单按钮、搜索框、购物车链接、登录按钮
- 主题切换：支持浅色/深色模式
- 轮播展示：特色产品横幅
- 产品展示：最新4个产品卡片
- 营销元素：本月优惠倒计时计时器、图标框
🛍️ 产品功能
- 产品详情页：价格、描述、评级等信息
- 多图展示：支持上传多张图片，点击缩略图切换
- 评论系统：需登录才能添加/更新评论和评级
🛒 购物车
- 添加产品到购物车
- 实时显示数量
- 增加/减少数量按钮
- 购物车摘要页面
- 未登录点击"继续结账"会跳转到登录页（带回调URL）
👤 用户系统
- 用户角色：user 或 admin
- 登录/注册：支持新用户注册和已有用户登录
- 个人资料：可更新用户信息
💳 结账流程
- 查看购物车项目
- 填写送货地址
- 选择支付方式
- 验证订单信息
- 下订单
- 订单详情页支付（PayPal/Stripe）
🔐 管理员功能
- 数据概览：月度销售图表
- 资源管理：产品、订单、用户管理
- CRUD操作：创建、更新、删除产品等资源
🔍 搜索功能
- 搜索页面：'/search'
- 过滤选项：类别、价格、评级
- 排序选项：日期、价格、评级
⭐ 评论系统
- 需登录才能使用
- 支持添加评论
- 支持更新评论和评级
🔄 用户体验亮点
- 登录后自动返回之前浏览的页面（通过回调URL）
- 响应式设计
- 主题切换功能
- 完整的购物流程体验
4. The Environment
核心工具准备
- 文本编辑器：推荐 VS Code，也可选用 Sublime Text、Vim 等工具
- 运行环境：必须安装 Node.js，搭配 npm 管理项目依赖包
- 版本控制与部署：需安装 git，部署时要将代码推送到 GitHub 仓库，再导入 Vercel 实现持续部署
推荐 VS Code 扩展
扩展名称 | 核心作用 |
Prettier | 自动格式化代码，统一代码风格 |
ESLint | 检查代码错误，强制遵循风格规范 |
Prisma | 实现 Prisma 数据模型代码高亮 |
Simple React Snippets | 快速生成 React 组件，提升开发效率 |
Tailwind CSS IntelliSense | 优化 Tailwind 类的使用体验 |
JavaScript ES6 | 快捷生成控制台日志、try catch 块等内容 |
Markdown Preview Enhanced（可选） | 查看格式化 Markdown 内容，提供额外功能 |
📎 参考文章
- 一些引用
- 引用文章
欢迎您在底部评论区留言，一起交流~
Loading...
