夜雨聆风大家好，课程规划出来了。功能就是jj.yushiqi.cc这个系统。一起来看看如何借助AI把它开发出来。关于这个系统的介绍请参考以下两篇文章：
给孩子的成绩单加个"仪表盘"：分享一个借助AI写的next.js小应用
01 前置要求
虽然是使用AI开发，借助git版本控制对AI生成的代码进行审查，但是还是需要有一定的基础。
熟悉前端三大件，HTML，CSS和Javascript。 有TypeScript基础 有Tailwind CSS基础 有React基础，了解next.js框架 了解shadcn/ui组件的使用
当然最重要的，是理解AI的工作模式。这里使用的AI辅助工具是Agent，你可以把它理解为一个初级程序员，你来指挥它工作。但它有不听话的时候，犯错的时候，要求你有能力发现错误并及时修复或指挥它修复。
所以把自己相像成一个发号施令的人，是很重要的事情。
02 课程基本信息
课程结构
每个Lesson都是一个独立的功能模块，每个模块都有一个目标和一个或多个任务。
从文章结构上来说，先会带着理解需求，解决方案，指挥AI动手等，会提供与AI协作的具体提示词（这是关键），然后AI会根据提示词生成代码。最后，我们要会对AI生成的代码进行审查，发现错误并及时修复或指挥它修复。
课程源代码与效果展示
这次课程源代码会放到github上，采用一课一个分支的方式，每个分支结束后PR进主分支最部署到vercel上让大家看到最终成果。
最终验收此课程是否成功的标准，就是和jj.yushiqi.cc这个系统功能完全一致。包括但不限于：
登录注册功能 成绩录入、展示、趋势图功能 系统设置（主题切换、语言选择） 性能优化（加载速度、响应时间）
课程更新频率
很难保证，日更挑战太大，毕竟是边写边更。
尽可能希望做到一周两次以上。
03 课程规划
以下是目前计划的课程规划，实际也许会有些许出入，但最后的目标不变。
第一部分：快速获得成果（Lesson 01-04）
目标：搭建项目骨架，建立状态管理，让首页有基本展示。
Lesson 01：项目初始化与首页骨架 + 无障碍基础
创建 Next.js 16 项目 安装 Tailwind CSS 4、shadcn/ui 创建 App Layout（顶部导航、底部 Footer） 运行 dev server，看到第一屏
Lesson 02：类型系统与数据模型 + TypeScript 进阶
定义 TypeScript 类型（Profile、Exam、SubjectScore） 定义 Grade、Semester、ExamType、SubjectName 联合类型 定义 Exam 接口 为后续功能打好类型基础
Lesson 03：全局状态与本地存储
创建 AppContext（useReducer + Context） 实现 localStorage 读写（SSR 安全） 实现 Theme 管理（light/dark/system + DOM class 切换） 首页接入 Context，显示 Welcome Banner InitWizard 组件
Lesson 03b：自定义 Hook 封装（v2 新增）
将 localStorage 逻辑封装为 useLocalStorage<T>将主题管理封装为 useTheme将数据持久化封装为 usePersistedState
第二部分：核心业务——成绩管理（Lesson 04-08）
目标：完成成绩录入、展示、趋势图，这是产品的核心。
Lesson 04：考试新增表单 + AI 协作实录
创建 ExamForm 组件 实现考试类型、学期、日期选择 实现多科目成绩录入 表单验证（分数范围、必填项） dispatch ADD_EXAM，保存到 localStorage
Lesson 05：考试列表与最近考试卡片 + 性能优化
创建 ExamList 组件 创建 RecentExamCard 组件 展示最近一次考试成绩 实现删除考试功能
Lesson 06：成绩趋势图 + AI 辅助调试
创建 TrendChartCard 组件 使用 Recharts 绘制折线图 多科目趋势对比 时间轴排序
Lesson 07：成绩统计面板
创建 SubjectStatsCard 组件 计算单科最高分、最低分、平均分 展示排名趋势 成绩限制（EXAM_LIMIT）
Lesson 08：古诗词卡片 + Image Optimization
添加古诗词静态数据（data/poems.json） 创建 PoemCard 组件 按日期轮播古诗词 记录每日阅读历史
第三部分：每日陪伴内容（Lesson 09-11）
目标：让首页内容丰富起来，提供每日学习陪伴。
Lesson 09：英语单词卡片
添加英语单词静态数据（data/words.json） 创建 WordCard 组件 按日期轮播单词 单词卡片样式
Lesson 10：今日历史与假期倒计时 + Middleware 概念
添加今日历史数据 创建 TodayInHistoryCard 组件 实现假期倒计时（寒暑假日期） 创建 HolidayCountdown 组件 Middleware 概念讲解（什么是中间件、为什么需要、Next.js Middleware 使用场景）
Lesson 11：课外读物 + 动态路由
添加课外读物静态数据（data/books.json） 创建 BookCard 组件 动态路由 ( app/books/[id]/page.tsx)分年级推荐书单 字数和阅读时长展示
第四部分：运动记录模块（Lesson 12-13）
目标：完成跳绳记录功能，包含记录、统计、图表。
Lesson 12：跳绳记录表单与列表
创建 JumpRopeForm 组件 创建 JumpRopeRecordsList 组件 新增/删除跳绳记录 跳绳功能开关（jumpRopeEnabled） 响应式布局复用（与 Lesson 05 模式对比）
Lesson 13：跳绳统计与趋势图
创建 JumpRopeStats 组件 计算连续天数 生成鼓励语 创建 JumpRopeChart（柱状+折线混合图） 卡路里计算
第五部分：认证与云端同步（Lesson 14-15）
目标：实现用户注册、登录、云端数据同步。
Lesson 14：用户认证系统 + Middleware 实践
创建 LoginDialog 和 RegisterDialog 实现 HMAC 邀请码验证 实现 scrypt 密码哈希 用户名/密码验证规则 API Routes： /api/auth/login、/api/auth/register
Lesson 15：云端同步与数据恢复
创建 Vercel Blob 存储逻辑 实现前端自动同步（syncToServer） 创建 /api/syncRoute Handler实现数据恢复（ /api/sync/restore）云端备份时间显示
第六部分：工程化与质量保障（Lesson 16-18）
目标：完善数据管理、测试、SEO，达到可发布标准。（v2 拆分为 3 课时）
Lesson 16：数据导入导出 + SEO 优化
创建 ImportExport 组件 JSON 导入导出功能（替换/合并模式） SEO 优化（Metadata、OG Image、Twitter Card、Schema.org） Sitemap 与 Robots 配置
Lesson 17：单元测试与测试驱动开发
编写 reducer 单元测试（ __tests__/reducer.test.ts）编写统计逻辑单元测试（ __tests__/stats.test.ts）编写同步逻辑单元测试（ __tests__/sync.test.ts）测试驱动开发实践：先写测试，再写实现 覆盖 auth、validation 测试
Lesson 18：错误边界与全局异常处理
创建 ErrorBoundary 组件 实现全局错误捕获 API 错误处理最佳实践 用户友好的错误提示
第七部分：工程规范与持续交付（Lesson 19-21）
目标：建立代码规范、CI/CD 流程、发布准备。（v2 全新阶段）
Lesson 19：CI/CD 自动化部署
GitHub Actions 工作流配置 自动化测试、Lint、Build Vercel 自动部署集成 环境变量管理（.env.local vs 生产环境） 部署回滚策略
Lesson 20：代码规范与 PR 流程
ESLint 配置与规则定制 Prettier 格式化 Git 分支策略（main + feature branches） PR 模板与 Code Review 清单 Commit Message 规范（Conventional Commits）
Lesson 21：更新日志与发布准备
更新日志页面（changelog.json + 时间线 UI） 版本号管理（语义化版本 SemVer） PWA 配置优化 性能审计（Lighthouse） 发布 checklist
04 写在最后
内容看起来很多，也涵盖了next.js开发的常见技术，让我们期待课程的开始吧。
