做了一个 AI 菜谱推荐应用——Meal Planner
每天最让人头疼的问题不是做饭，而是「今天吃什么」。打开外卖 App 翻了十分钟，最后还是点了那家黄焖鸡。这个场景太熟悉了，所以我做了 Meal Planner——一个基于 AI 的智能菜谱推荐应用，帮你用 3 秒钟搞定今天吃什么。
三种推荐方式，覆盖不同场景
做这个应用的初衷很简单：不同时候，你需要的推荐方式不一样。
🎲 随机推荐——治好选择困难症
没有任何条件，点一下直接给你一道菜。就像掷骰子，但每次都能掷出一道能做的菜。不满意？点「换一道」，自动去重，不会反复推荐同一道。
🤖 AI 推荐——按你的条件来
这是核心功能。你可以告诉它：几个人吃、喜欢什么口味、有多少时间做、预算多少、是不是在减脂。AI 会根据这些条件综合推荐，而不是简单匹配关键词。比如你说「2 个人、30 分钟、清淡、预算 30 元」，它会推荐真正符合这些约束的菜谱，而不是把所有清淡的菜都丢给你。
🧊 冰箱食材——有什么做什么
打开冰箱看看还剩什么，输进去，它告诉你这些食材能做什么菜。这个功能特别适合周末清理冰箱的时候用，不用再对着食材发呆了。
技术选型：为什么选 Next.js 16 + React 19
这个项目我用了比较新的技术栈：
| 分类 | 技术 | 选型理由 |
|---|---|---|
| 框架 | Next.js 16 (App Router) | SSR/SSG 支持好，对 SEO 友好 |
| UI | React 19 | 配合 Next.js 16，体验最新的 Server Components |
| 样式 | TailwindCSS 4 + shadcn/ui | 开发速度快，组件质量高 |
| 动画 | Framer Motion | 声明式动画，写起来舒服 |
| 状态 | Zustand | 轻量，够用 |
| 请求 | TanStack Query | 缓存、重试、状态管理一步到位 |
| 表单 | React Hook Form + Zod | 类型安全的表单验证 |
| AI | DeepSeek API | 性价比高，中文能力强 |
| 数据 | HuggingFace 菜谱数据集 | 开源的中国菜谱语料库 |
几个值得说的点：
Next.js 16 的 App Router 用起来确实和 Pages Router 不一样。Server Components 让我可以在服务端直接调用 AI 和数据源，不用暴露 API 密钥给前端。Layout 嵌套也让页面结构更清晰。
shadcn/ui 是真的好用。它不是一个 npm 包，而是把组件代码直接复制到你的项目里，你可以随意魔改。对于个人项目来说，省去了大量 UI 组件的搭建时间。
DeepSeek API 作为 AI 后端，性价比很高。中文理解能力不错，返回结构化 JSON 也比较稳定。菜谱推荐这种场景不需要太强的推理能力，DeepSeek 完全够用。
数据架构：菜谱从哪来
这个项目的数据流比较有意思：
- 菜谱列表：从 HuggingFace 的 XiaChuFang Recipe Corpus 数据集随机采样 1000 条菜谱（10 批 × 100 条），内存缓存 5 分钟。这样既保证了随机性，又不会频繁请求。
- 菜谱详情：优先从缓存里匹配，匹配不到的话由 DeepSeek 自动生成食材清单、步骤和小贴士。
- AI 推荐：用户输入条件后，DeepSeek 返回结构化 JSON，包含推荐的菜名和推荐理由。
用户请求 → 条件解析 → DeepSeek 推荐 → 匹配缓存详情
↓ 未匹配
DeepSeek 生成详情 → 返回这种「在线数据 + AI 兜底」的模式，让应用既快又不会缺内容。
移动端优先
虽然是个 Web 应用，但我从一开始就按移动端优先来设计。毕竟「今天吃什么」这个问题，绝大多数时候是在手机上想起来的。
- 响应式布局，手机端体验完整
- 触控友好的大按钮
- Framer Motion 做的转场动画，让页面切换更流畅
- 预留了微信小程序的迁移方案（Next.js 的 API 路由可以直接复用）
后续计划
目前预留了一些功能的架构，但还没实现：
- 收藏和浏览历史：记录你喜欢的菜谱
- 一周菜单：规划一周的三餐
- 买菜清单：根据菜单自动生成购物清单
- AI 识图：拍一张冰箱照片，自动识别食材
这些功能不急着做，先把核心的推荐体验打磨好再说。
写在最后
做这个项目的驱动力很简单——自己用。每天晚上纠结吃什么的时候，打开自己做的应用摇一道，体验确实不错。而且用到了 Next.js 16 和 React 19 这些新技术，也算是一次技术实践。
如果你也在为「今天吃什么」发愁，欢迎试试。如果对项目代码感兴趣，也欢迎 Star 和提 Issue。