【带源码】我用React19 + Next.js15写了个小米商城

1,583 阅读3分钟

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协议

效果预览

home page search page buy page spec page product page cart page orders page order page address page profile page account page auth page


🧩 功能一览

  • 首页
  • 搜索页

用户模块

  • 密码登录+验证码登录、注册、找回密码
  • 个人基础信息修改
  • 账号、密码修改
  • 商品收藏管理
  • 收货地址管理

商品模块

  • 商品详情页
  • 商品参数页
  • 商品评论页
  • 商品购买页

购物与订单

  • 购物车
  • 结算页
  • 支付页
  • 订单列表、订单详情
  • 待评价订单列表、评价详情

其他功能

  • 视频列表页
  • 部分页面支持国际化
  • 部分页面支持主题切换(亮 / 暗 / 自适应)

🏗️ 技术栈

类别技术栈
前端框架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 🐛,你的支持是我持续优化的动力!


📚 推荐学习资源