高性能完整开源电商项目分享 - Next.js + TRpc + Postgre + React的H5&Admin

基于 Next.js 构建的全栈电商解决方案，集成了现代 Web 技术栈

快速开发代码易懂方便二开源码全开源

前言

现在很多开源电商项目有以下问题

开源的都是很老的版本，技术栈老，界面丑陋，不说多好看吧，就真的很老的设计，新的都要额外收费；
动不动各种跑不起来，不知道是缺了个什么玩意儿；且跑起来复杂；
体验版本和实际开源根本不一致；
很多版本跑起来内存占用很多，服务器呜呜呜的，首屏也做得很差；

针对上面问题推荐大家一起开源学习下面这个项目！
项目开源地址感谢点星+收藏

🚀 项目简介

NextMall 是一个功能完整的现代化电商平台，专为追求高性能和用户体验而设计。项目采用 Next.js 15 + TRpc + TypeScript + Prisma + React + Chakra 的全栈技术架构，提供了完整的电商业务流程，包括商品管理、订单处理、用户系统、支付集成等核心功能。

🌟 优势

极致开发体验 next.js/trpc/prisma/chakra，方便二次开发
高性能
node+postgre就可快速本地部署或者docker一键部署
现代化的界面设计
开源学习：提供完整的代码

⚡ 高性能

服务器占用小 100M多一点
客户端加载小几百kb的静态资源

🌐 在线演示

登录页：https://nsguf.cpolar.top/login

admin:16666666666 admin123

供应商：17777777777 admin123

普通用户：18888888888 admin123

管理页：https://nsguf.cpolar.top/admin

供应商管理页：https://nsguf.cpolar.top/vendor

普通用户h5界面：https://nsguf.cpolar.top/h5

✨ 核心特性

🛍️ 商城功能

商品管理: 完整的商品发布、编辑、分类管理系统
多规格支持: 支持商品多规格、库存管理
购物车: 智能购物车，支持规格选择和数量调整
订单系统: 完整的订单流程，从下单到发货的全流程管理
收货地址: 多地址管理，支持默认地址设置

👥 用户系统

多角色权限: 超级管理员、供应商、普通用户等多角色体系
认证授权: 基于 NextAuth.js 的安全认证系统
用户资料: 完整的用户信息管理和头像上传
收藏足迹: 商品收藏和浏览历史功能

📚 内容管理

课程系统: 支持视频课程发布和播放
合集管理: 课程合集和分类组织
Banner管理: 首页轮播图和广告位管理

📱 移动端适配

响应式设计: 完美适配桌面端和移动端
PWA支持: 渐进式 Web 应用体验
H5界面: 专门优化的移动端商城界面

🔧 管理后台

超级管理员: 拥有系统最高权限，可管理所有用户、商品、订单、供应商及平台设置，查看和分析全站销售数据、用户行为，分配和调整各类权限，进行系统维护与审计。
供应商: 可管理自身商品及库存，查看本店铺的订单和销售数据，分析商品表现，及时响应库存预警，支持商品上下架和价格调整。
数据统计: 销售数据、用户行为等全面统计
操作日志: 完整的系统操作审计日志
权限管理: 细粒度的权限控制系统

🚀 快速开始

📋 环境要求

Node.js 18+ & PostgreSQL 17+
或 Docker & Docker Compose (推荐)

🐳 Docker 一键部署

bash 复制代码

# 克隆项目
git clone https://github.com/your-username/nextmall.git
cd nextmall

# 配置环境变量
cp .env.example .env
# 编辑 .env 文件，设置数据库密码等配置

# 启动服务
docker compose up -d

访问 http://localhost:3000 即可使用

💻 本地开发

安装依赖

bash 复制代码

pnpm install

配置数据库

bash 复制代码

# 将 .env.example 重命名为 .env 并配置数据库连接
cp .env.example .env

# 推送数据库结构
pnpm db:push

# (可选) 运行种子数据
pnpm db:seed

启动开发服务器

bash 复制代码

pnpm dev

构建生产版本

bash 复制代码

pnpm build
pnpm start

🔧 其他可用命令

bash 复制代码

# 数据库操作
pnpm db:studio      # 打开 Prisma Studio
pnpm db:generate    # 生成 Prisma 客户端
pnpm db:migrate     # 运行数据库迁移

# 代码质量
pnpm lint           # 运行 ESLint
pnpm typecheck      # TypeScript 类型检查
pnpm format:write   # 格式化代码

🏗️ 技术架构

前端技术栈

Next.js 15 - React 全栈框架
TypeScript - 类型安全的 JavaScript
Chakra UI - 现代化 React 组件库
React Query - 数据获取和状态管理
React Hook Form - 高性能表单处理
Next Themes - 主题切换支持

后端技术栈

tRPC - 端到端类型安全 API
Prisma - 现代化数据库 ORM
NextAuth.js - 认证授权解决方案
PostgreSQL - 关系型数据库
Zod - TypeScript 优先的模式验证

开发工具

ESLint - 代码质量检测
Prettier - 代码格式化
Docker - 容器化部署
pnpm - 高效的包管理器

📝 功能清单

✅ 已完成功能

用户系统

用户注册/登录
多角色权限系统 (超级管理员/供应商/普通用户)
收货地址管理

商品系统

订单系统

内容管理

视频课程系统
课程合集管理
Banner 轮播图管理
用户浏览足迹

管理功能

后台管理界面
数据统计面板
操作日志记录
系统配置管理

📸 界面展示

登录注册

📱 普通用户界面

⚙️ 管理后台

admin

供应商

🤝 贡献指南

我们欢迎任何形式的贡献！无论是报告 bug、提出新功能建议，还是提交代码改进。

如何贡献

Fork 本仓库
创建您的特性分支 (git checkout -b feature/AmazingFeature)
提交您的修改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打开一个 Pull Request

开发规范

遵循现有的代码风格
为新功能添加适当的测试
更新相关文档
确保所有测试通过

项目统计

⭐ Stars: 给项目点个星星吧！
🍴 Fork: 欢迎 Fork 项目进行二次开发
👥 贡献者: 感谢所有为项目做出贡献的开发者

声明

本项目仅做技术交流和学习，不建议用于商业目的！

如果我的分享对你有用，欢迎点赞收藏关注~~~