C25

动态课程页

任务说明

Next.js 工程

给课程站补上动态详情页：app/courses/[courseId]/page.tsx 读取 URL 里的课程标识（Next.js 16 中 params 是 Promise，必须 await），查到课程就渲染标题、简介和课时列表；查不到就调用 notFound() 让未找到页面接管。首页 app/page.tsx 已列出全部课程链接。验收方式：本练习无法自动判分。补齐 starter 后在 examples/exercises/next-c25-course-page/starter 目录执行 npm install && npm run dev，浏览器访问 http://localhost:3000 按要求走查；tests/check.mjs 是结构自检（node tests/check.mjs starter 或 solution 目录路径）。关键走查：访问 /courses/next-101 看到内容；访问 /courses/nope 看到 404 页而不是报错白屏。

要求

动态页组件是 async 函数，参数类型为 { params: Promise<{ courseId: string }> }，用 await params 取值
courseId 在数据里不存在时调用 notFound()，由 app/not-found.tsx 渲染未找到页面
详情页展示课程 title、summary 和 lessons 列表
首页每个课程用 Link 指向 /courses/<courseId>
不允许不经 await 直接访问 params.courseId

N02 App Router 与页面 N04 动态参数与搜索参数

分层提示

先自己试，再逐层展开。

参考答案

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

动态课程页

Command Palette