C34

全栈联调

手机上可以运行，但建议在电脑上完成代码练习。

编辑器加载中…

任务说明

Next.js 工程

综合题：学习打卡站，把 N 系列的主线串起来。功能：任务清单（读取，支持 ?filter=all|open|done 筛选，刷新恢复）、编辑任务标题（Server Action）、提交打卡（useActionState 表单，反馈成功/失败消息）、数据写 var/data/checkpoint.json 持久化。完成后用 tests/README.md 的代表路径清单走查：读、改、交、反馈、刷新恢复各一条。验收方式：本练习无法自动判分。补齐 starter 后在 examples/exercises/next-c34-fullstack-checkpoint/starter 目录执行 npm install && npm run dev，浏览器访问 http://localhost:3000 按要求走查；tests/check.mjs 是结构自检（node tests/check.mjs starter 或 solution 目录路径）。关键走查：筛选后刷新仍在；改标题立即生效；打卡后看到成功反馈；非法输入（空标题）看到错误消息而非崩溃；重启 dev 数据还在。

要求

app/page.tsx 用 await searchParams 读取 filter，非法值按 all 处理，筛选链接写进 URL
app/actions.ts 以 "use server" 开头：editTaskAction、checkinAction 接收 (prevState, formData) 并返回 {ok, message} 供 useActionState 展示
app/task-editor.tsx 与 app/checkin-form.tsx 声明 "use client"，用 useActionState 绑定 action 并渲染反馈消息
校验在前：空标题/空打卡备注返回 {ok:false, message}，不写库
写库成功后 revalidatePath("/")，数据经 lib/store.ts 持久化到 var/data/checkpoint.json

N23 个人知识站完整实战 N24 全栈应用架构复盘 N21 测试与故障排查

分层提示

先自己试，再逐层展开。

参考答案

卡住时再看；查看操作会记录下来用于复盘。测试版本 1.0.0

全栈联调

Command Palette

全栈联调