考试前一晚突击背书的人都知道，想把所有内容塞进脑子有多难。闪卡之所以是效率最高的学习工具之一，靠的是主动回忆：你不是被动翻笔记，而是主动逼自己想起答案。研究显示，这种方式能强化记忆，让信息真正留下来。

这篇教程会带你做一个全栈闪卡应用，学生可以用它创建科目，比如“生物学 101”或“微积分”；往科目里添加闪卡，正面写问题、背面写答案；翻卡学习，并标记自己答对还是答错；最后追踪进度，看看自己掌握得怎么样。

打开网易新闻 查看精彩图片

技术栈一览

项目用 Next.js 做框架，它负责路由、服务端渲染和 API 路由，前端后端可以放在同一个项目里。数据库选 MongoDB，一种以 JSON 风格文档存储数据的 NoSQL 数据库，不用传统表格的行列结构，对新手友好，还能用 MongoDB Atlas 的免费额度或本地 Docker 运行。Mongoose 则用来给 MongoDB 定义模式和模型，加上结构和校验，避免存进无效数据。

项目搭建步骤

动手前先明确要做什么：用 TypeScript 创建 Next.js 项目、连接 MongoDB 并存储数据、编写增删改查的 API 路由、用 React 做表单列表和可交互闪卡界面，最后加上翻卡动画和进度追踪。整个过程不需要你事先用过这些工具，每一步都会解释清楚。

具体流程包括创建 Next.js 项目、安装 Mongoose、设置 MongoDB、创建环境变量文件、理解文件夹结构。接着分五部分推进：连接数据库；定义 Subject、Flashcard、Progress 三个数据模型；通过 API 路由创建科目和闪卡；用动态 API 路由按 ID 获取、更新、删除科目与闪卡；最后实现进度追踪 API。

界面与功能实现

UI 部分覆盖科目页、科目详情页、学习页和进度页。科目详情页用来创建和编辑闪卡，学习页负责翻卡、播放翻转动画并记录答题结果，进度页展示学习情况。文章最后还整理了代码组织、错误处理、性能技巧和结论，方便你按目录逐段对照实现。