mishop-next
精仿小米商城,基于Next.js 15 + React 19 + TypeScript + TailwindCSS。
👉 项目地址:
Next.js
援引ChatGPT对它的介绍:
Next.js 是一个现代 Web 应用开发的全能型框架。它将 React 推向了一个新的高度,不再只是“前端框架”,而是变成了构建完整应用的“平台”。在性能、开发体验、SEO、可维护性等方面都处于领先。
相比React做了不少优化
- 自动代码拆分(
Code Splitting
) - 按需加载(
Lazy Loading
) - 图片优化(
next/image
支持自动压缩、懒加载、响应式) - 预加载链接(
Link Prefetch
) - 通过文件系统自动生成路由(基于
app/
或pages/
目录),app router
下支持自动嵌套布局 - 支持构建
前后端一体
、纯前端
、纯API
应用 - 中间件支持(
Middleware
),可用于认证、重定向等 - 环境变量管理更简单等
支持多种渲染方式
- SSR(Server Side Rendering) :首次请求由服务器生成 HTML,提高首屏性能和 SEO。
- SSG(Static Site Generation) :构建时生成静态页面,适用于内容更新不频繁的场景。
- ISR(Incremental Static Regeneration) :增量静态生成,结合了 SSG 的速度和 SSR 的灵活性。
- CSR(Client Side Rendering) :客户端渲染,适用于动态内容部分。
代表性应用案例
TailwindCSS
Tailwind CSS 是一个功能强大且优雅的原子化 CSS 框架,专注于实用类(utility-first)的开发方式,让开发者可以直接在 HTML 中快速构建现代、响应式且高度可定制的界面。对响应式、多主题、RTL等都支持的很好且简单。
✨ 项目亮点
- ✅ 使用 Next.js App Router 架构,服务端渲染,页面可配置静态化方案
- ✅ 使用 React 19 新特性(如
useActionState
,useOptimistic
,useTransition
,use
等提升开发体验和用户体验) - ✅ 部分页面支持 深色/浅色/自适应主题
- ✅ 部分页面支持 多语言切换+
RTL
- ✅
WebSocket
支付成功模拟 - ✅
Redis
+BullMQ
实现超时订单自动取消 - ✅ 使用
Drizzle ORM
操作 MySQL 数据库 - ✅ 部分动画使用
motion
- ✅ 样式使用
tailwindcss
- ✅ 前后端异步交互使用
Next.js
内部RPC
协议
效果预览
🧩 功能一览
- 首页
- 搜索页
用户模块
- 密码登录+验证码登录、注册、找回密码
- 个人基础信息修改
- 账号、密码修改
- 商品收藏管理
- 收货地址管理
商品模块
- 商品详情页
- 商品参数页
- 商品评论页
- 商品购买页
购物与订单
- 购物车
- 结算页
- 支付页
- 订单列表、订单详情
- 待评价订单列表、评价详情
其他功能
- 视频列表页
- 部分页面支持国际化
- 部分页面支持主题切换(亮 / 暗 / 自适应)
🏗️ 技术栈
类别 | 技术栈 | |
---|---|---|
前端框架 | Next.js 15+ (App Router) | |
前端库 | React 19 | |
样式 | Tailwind CSS, Motion | |
数据库 | MySQL + Drizzle ORM | |
消息队列 | Redis + BullMQ | |
实时通信 | WebSocket | |
国际化 | next-intl | |
认证 | next-auth |
项目详细运行步骤参见项目内 README.md 文件;项目构建后页面响应速度将大幅提升
🐞 已知问题
- 🔍 搜索功能未使用全文索引或搜索引擎(如 ElasticSearch)
- 🌐 页面静态化(SSG)后无法动态响应主题 / 语言切换
- 💰 支付/发送验证码仅为模拟流程,生成的验证码会打印到控制台
- 还有若干问题待优化...
🤝 欢迎贡献
欢迎大家一起来完善这个项目,包括不限于补充新功能、修复已知问题、增强用户体验等...
如果你喜欢这个项目,欢迎 Star ⭐、Fork 🍴、提 Issue 🐛,你的支持是我持续优化的动力!