--- theme: channing-cyan --- # mishop-next 精仿小米商城，基于Next.js 15 + React 19 + TypeScript + TailwindCSS。 👉 项目地址： * [Gitee](https://gitee.com/chengdongqing/mishop-next) * [Github](https://github.com/chengdongqing/mishop-next) *** ## 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）** ：客户端渲染，适用于动态内容部分。 ### **代表性应用案例** * [OpenAI官网](https://openai.com) * [小米汽车官网](https://www.xiaomiev.com) *** ## 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

*** ## 🧩 功能一览 * 首页 * 搜索页 ### 用户模块 * 密码登录+验证码登录、注册、找回密码 * 个人基础信息修改 * 账号、密码修改 * 商品收藏管理 * 收货地址管理 ### 商品模块 * 商品详情页 * 商品参数页 * 商品评论页 * 商品购买页 ### 购物与订单 * 购物车 * 结算页 * 支付页 * 订单列表、订单详情 * 待评价订单列表、评价详情 ### 其他功能 * 视频列表页 * 部分页面支持国际化 * 部分页面支持主题切换（亮 / 暗 / 自适应） *** ## 🏗️ 技术栈 | 类别 | 技术栈 | | | ---- | ------------------------ | - | | 前端框架 | 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 🐛，你的支持是我持续优化的动力！ *** ## 📚 推荐学习资源 * [Next.js](https://nextjs.org) * [React](https://react.dev) * [TailwindCSS](https://tailwindcss.com) * [Drizzle ORM](https://orm.drizzle.team/)