高性能完整开源电商项目分享 - Next.js + TRpc + Postgre + React的H5&Admin
<div align="center"><p>基于 Next.js 构建的全栈电商解决方案，集成了现代 Web 技术栈</p>
<p>快速开发 代码易懂 方便二开 源码全开源</p>
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/7608f452cbd645dba48cc328622b5b53~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqR5pm65qGl:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODQ1OTczNjQ0OTE3MTYzIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1758353931&x-orig-sign=WS0PVcruaUfawkBWgUZjoXKph2A%3D">
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/bf8454036f994f179337b453b4e6dbdb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqR5pm65qGl:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODQ1OTczNjQ0OTE3MTYzIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1758353931&x-orig-sign=%2BJohLSmk6cN32QHRFmzq5EZ95bk%3D">
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/df829259d5954320b2f479ced5d584a6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqR5pm65qGl:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODQ1OTczNjQ0OTE3MTYzIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1758353931&x-orig-sign=CJ%2F%2B9zzICzNgtGlFVSjQIW0bKts%3D">
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/41c6ebb60e04462eadaed7093f5792f8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqR5pm65qGl:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODQ1OTczNjQ0OTE3MTYzIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1758353931&x-orig-sign=SroKj5R%2FGrkANQihwDd3AJ8Y7ak%3D">
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/361518c030ce4c19975e8ebf91d4094f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqR5pm65qGl:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODQ1OTczNjQ0OTE3MTYzIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1758353931&x-orig-sign=Df0cPmKx6Pgy89Ba7T1aFUzt6JY%3D">
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/294a9c45b4c34eedb64b2545d0e63175~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqR5pm65qGl:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODQ1OTczNjQ0OTE3MTYzIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1758353931&x-orig-sign=imQQlDaWIB3S%2BhhN%2FH%2F2%2BEDDykY%3D">
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/b32e95b44b6e4bc4802201b3822a0979~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqR5pm65qGl:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODQ1OTczNjQ0OTE3MTYzIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1758353931&x-orig-sign=mhTlA%2B4kCry966D5l1H%2FJrkNtuE%3D">
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/b6a3b65fc0fc4d599f7906487a0ec7b1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqR5pm65qGl:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODQ1OTczNjQ0OTE3MTYzIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1758353931&x-orig-sign=gJNwK4tDWFwp2NUM%2BQNDr2Hek4w%3D">
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/56aa4f9d977346f2b30fd43e653d34e8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqR5pm65qGl:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODQ1OTczNjQ0OTE3MTYzIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1758353931&x-orig-sign=4Us4d0a8vOeQMhK1ENfo3IvP06k%3D">
<img src="https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/a5d6378c34bc482a845178b4826102a9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5LqR5pm65qGl:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiODQ1OTczNjQ0OTE3MTYzIn0%3D&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1758353931&x-orig-sign=6FkjZkwYvNEgTR741aayGfQ0Wdk%3D">
</div>
<h2 id="前言">前言</h2>
<blockquote>
<p>现在很多开源电商项目有以下问题</p>
</blockquote>
<ol>
<li>开源的都是很老的版本，技术栈老，界面丑陋，不说多好看吧，就真的很老的设计，新的都要额外收费；</li>
<li>动不动各种跑不起来，不知道是缺了个什么玩意儿；且跑起来复杂；</li>
<li>体验版本和实际开源根本不一致；</li>
<li>很多版本跑起来内存占用很多，服务器呜呜呜的，首屏也做得很差；</li>
</ol>
<p>针对上面问题推荐大家一起开源学习下面这个项目！<br>
项目开源地址 感谢点星+收藏</p>
<h2 id="-项目简介">🚀 项目简介</h2>
<p>NextMall 是一个功能完整的现代化电商平台，专为追求高性能和用户体验而设计。项目采用 Next.js 15 + TRpc + TypeScript + Prisma + React + Chakra 的全栈技术架构，提供了完整的电商业务流程，包括商品管理、订单处理、用户系统、支付集成等核心功能。</p>
<h2 id="-优势">🌟 优势</h2>
<ol>
<li>极致开发体验 next.js/trpc/prisma/chakra，方便二次开发</li>
<li>高性能</li>
<li>node+postgre就可快速本地部署或者docker一键部署</li>
<li>现代化的界面设计</li>
<li>开源学习：提供完整的代码</li>
</ol>
<h2 id="-高性能">⚡ 高性能</h2>
<ol>
<li>
<p>服务器占用小 100M多一点<br>
<img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160754101-2098947514.png"></p>
</li>
<li>
<p>客户端加载小 几百kb的静态资源<br>
<img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160802109-914302815.png"></p>
</li>
</ol>
<h2 id="-在线演示">🌐 在线演示</h2>
<p>登录页：https://nsguf.cpolar.top/login<br>
admin:16666666666 admin123<br>
供应商：17777777777 admin123<br>
普通用户：18888888888 admin123<br>
管理页：https://nsguf.cpolar.top/admin<br>
供应商管理页：https://nsguf.cpolar.top/vendor<br>
普通用户h5界面：https://nsguf.cpolar.top/h5</p>
<h2 id="-核心特性">✨ 核心特性</h2>
<h3 id="️-商城功能">🛍️ 商城功能</h3>
<ul>
<li><strong>商品管理</strong>: 完整的商品发布、编辑、分类管理系统</li>
<li><strong>多规格支持</strong>: 支持商品多规格、库存管理</li>
<li><strong>购物车</strong>: 智能购物车，支持规格选择和数量调整</li>
<li><strong>订单系统</strong>: 完整的订单流程，从下单到发货的全流程管理</li>
<li><strong>收货地址</strong>: 多地址管理，支持默认地址设置</li>
</ul>
<h3 id="-用户系统">👥 用户系统</h3>
<ul>
<li><strong>多角色权限</strong>: 超级管理员、供应商、普通用户等多角色体系</li>
<li><strong>认证授权</strong>: 基于 NextAuth.js 的安全认证系统</li>
<li><strong>用户资料</strong>: 完整的用户信息管理和头像上传</li>
<li><strong>收藏足迹</strong>: 商品收藏和浏览历史功能</li>
</ul>
<h3 id="-内容管理">📚 内容管理</h3>
<ul>
<li><strong>课程系统</strong>: 支持视频课程发布和播放</li>
<li><strong>合集管理</strong>: 课程合集和分类组织</li>
<li><strong>Banner管理</strong>: 首页轮播图和广告位管理</li>
</ul>
<h3 id="-移动端适配">📱 移动端适配</h3>
<ul>
<li><strong>响应式设计</strong>: 完美适配桌面端和移动端</li>
<li><strong>PWA支持</strong>: 渐进式 Web 应用体验</li>
<li><strong>H5界面</strong>: 专门优化的移动端商城界面</li>
</ul>
<h3 id="-管理后台">🔧 管理后台</h3>
<ul>
<li><strong>超级管理员</strong>: 拥有系统最高权限，可管理所有用户、商品、订单、供应商及平台设置，查看和分析全站销售数据、用户行为，分配和调整各类权限，进行系统维护与审计。</li>
<li><strong>供应商</strong>: 可管理自身商品及库存，查看本店铺的订单和销售数据，分析商品表现，及时响应库存预警，支持商品上下架和价格调整。</li>
<li><strong>数据统计</strong>: 销售数据、用户行为等全面统计</li>
<li><strong>操作日志</strong>: 完整的系统操作审计日志</li>
<li><strong>权限管理</strong>: 细粒度的权限控制系统</li>
</ul>
<h2 id="-快速开始">🚀 快速开始</h2>
<h3 id="-环境要求">📋 环境要求</h3>
<ul>
<li>Node.js 18+ & PostgreSQL 17+</li>
<li>或 Docker & Docker Compose (推荐)</li>
</ul>
<h3 id="-docker-一键部署">🐳 Docker 一键部署</h3>
<pre><code class="language-bash"># 克隆项目
git clone https://github.com/your-username/nextmall.git
cd nextmall
# 配置环境变量
cp .env.example .env
# 编辑 .env 文件，设置数据库密码等配置
# 启动服务
docker compose up -d
</code></pre>
<p>访问 http://localhost:3000 即可使用</p>
<h3 id="-本地开发">💻 本地开发</h3>
<ol>
<li><strong>安装依赖</strong></li>
</ol>
<pre><code class="language-bash">pnpm install
</code></pre>
<ol start="2">
<li><strong>配置数据库</strong></li>
</ol>
<pre><code class="language-bash"># 将 .env.example 重命名为 .env 并配置数据库连接
cp .env.example .env
# 推送数据库结构
pnpm db:push
# (可选) 运行种子数据
pnpm db:seed
</code></pre>
<ol start="3">
<li><strong>启动开发服务器</strong></li>
</ol>
<pre><code class="language-bash">pnpm dev
</code></pre>
<ol start="4">
<li><strong>构建生产版本</strong></li>
</ol>
<pre><code class="language-bash">pnpm build
pnpm start
</code></pre>
<h3 id="-其他可用命令">🔧 其他可用命令</h3>
<pre><code class="language-bash"># 数据库操作
pnpm db:studio # 打开 Prisma Studio
pnpm db:generate # 生成 Prisma 客户端
pnpm db:migrate # 运行数据库迁移
# 代码质量
pnpm lint # 运行 ESLint
pnpm typecheck # TypeScript 类型检查
pnpm format:write # 格式化代码
</code></pre>
<h2 id="️-技术架构">🏗️ 技术架构</h2>
<h3 id="前端技术栈">前端技术栈</h3>
<ul>
<li><strong>Next.js 15</strong> - React 全栈框架</li>
<li><strong>TypeScript</strong> - 类型安全的 JavaScript</li>
<li><strong>Chakra UI</strong> - 现代化 React 组件库</li>
<li><strong>React Query</strong> - 数据获取和状态管理</li>
<li><strong>React Hook Form</strong> - 高性能表单处理</li>
<li><strong>Next Themes</strong> - 主题切换支持</li>
</ul>
<h3 id="后端技术栈">后端技术栈</h3>
<ul>
<li><strong>tRPC</strong> - 端到端类型安全 API</li>
<li><strong>Prisma</strong> - 现代化数据库 ORM</li>
<li><strong>NextAuth.js</strong> - 认证授权解决方案</li>
<li><strong>PostgreSQL</strong> - 关系型数据库</li>
<li><strong>Zod</strong> - TypeScript 优先的模式验证</li>
</ul>
<h3 id="开发工具">开发工具</h3>
<ul>
<li><strong>ESLint</strong> - 代码质量检测</li>
<li><strong>Prettier</strong> - 代码格式化</li>
<li><strong>Docker</strong> - 容器化部署</li>
<li><strong>pnpm</strong> - 高效的包管理器</li>
</ul>
<h2 id="-功能清单">📝 功能清单</h2>
<h3 id="-已完成功能">✅ 已完成功能</h3>
<h4 id="用户系统">用户系统</h4>
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 用户注册/登录</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 多角色权限系统 (超级管理员/供应商/普通用户)</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 收货地址管理</label></li>
</ul>
<h4 id="商品系统">商品系统</h4>
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 商品发布和编辑</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 多规格商品支持</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 商品分类管理</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 商品图片上传</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 库存管理</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 商品收藏/足迹功能</label></li>
</ul>
<h4 id="订单系统">订单系统</h4>
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 购物车功能</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 订单创建和管理</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 订单状态流转</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 物流信息管理</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 支付码上传管理</label></li>
</ul>
<h4 id="内容管理">内容管理</h4>
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 视频课程系统</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 课程合集管理</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> Banner 轮播图管理</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 用户浏览足迹</label></li>
</ul>
<h4 id="管理功能">管理功能</h4>
<ul class="contains-task-list">
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 后台管理界面</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 数据统计面板</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 操作日志记录</label></li>
<li class="task-list-item"><input class="task-list-item-checkbox" checked="" disabled="" type="checkbox"><label> 系统配置管理</label></li>
</ul>
<h2 id="-界面展示">📸 界面展示</h2>
<h3 id="登录注册">登录注册</h3>
<p><img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160838228-275397912.png"></p>
<h3 id="-普通用户界面">📱 普通用户界面</h3>
<p><img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160844672-1581293779.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160856708-2007007876.png"><br>
<img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160859792-387369240.png"></p>
<h3 id="️-管理后台">⚙️ 管理后台</h3>
<h4 id="admin">admin</h4>
<p><img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160907207-972293685.png"><br>
<img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160914120-76890014.png"><br>
<img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160937054-717113633.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160944534-1683107282.png"><br>
<img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160947791-431161743.png"></p>
<h4 id="供应商">供应商</h4>
<p><img src="https://img2024.cnblogs.com/blog/793203/202509/793203-20250919160954613-1430308294.png"></p>
<h2 id="-贡献指南">🤝 贡献指南</h2>
<p>我们欢迎任何形式的贡献！无论是报告 bug、提出新功能建议，还是提交代码改进。</p>
<h3 id="如何贡献">如何贡献</h3>
<ol>
<li>Fork 本仓库</li>
<li>创建您的特性分支 (<code>git checkout -b feature/AmazingFeature</code>)</li>
<li>提交您的修改 (<code>git commit -m 'Add some AmazingFeature'</code>)</li>
<li>推送到分支 (<code>git push origin feature/AmazingFeature</code>)</li>
<li>打开一个 Pull Request</li>
</ol>
<h3 id="开发规范">开发规范</h3>
<ul>
<li>遵循现有的代码风格</li>
<li>为新功能添加适当的测试</li>
<li>更新相关文档</li>
<li>确保所有测试通过</li>
</ul>
<h3 id="项目统计">项目统计</h3>
<ul>
<li>⭐ Stars: 给项目点个星星吧！</li>
<li>🍴 Fork: 欢迎 Fork 项目进行二次开发</li>
<li>👥 贡献者: 感谢所有为项目做出贡献的开发者</li>
</ul>
<h2 id="声明">声明</h2>
<p>本项目仅做技术交流和学习，不建议用于商业目的！</p>
<p>如果我的分享对你有用，欢迎点赞收藏关注~~~</p>
</div>
<div id="MySignature" role="contentinfo">
文章来源：NSGUF，欢迎分享，转载请保留出处<br><br>
来源：https://www.cnblogs.com/NSGUF/p/19101074
頁:
[1]