C31

MDX 正文

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

编辑器加载中…

任务说明

Next.js 工程

课程正文渲染器：lib/content.ts 存了三篇 MDX 文本（frontmatter + ## 标题 + 代码围栏 + :::tip/:::warn 提示块 + 普通段落）。在 lib/mdx.ts 实现解析：zod 校验 frontmatter（缺 title/slug 报错）、标题生成锚点 id、围栏成对校验（不闭合抛 MarkdownError），并从 h2 生成目录；app/posts/[slug]/page.tsx 渲染正文、Callout 组件与可跳转目录，无效正文（post-broken）降级为明确错误提示而不白屏。验收方式：本练习无法自动判分。补齐 starter 后在 examples/exercises/next-c31-mdx-body/starter 目录执行 npm install && npm run dev，浏览器访问 http://localhost:3000 按要求走查；tests/check.mjs 是结构自检（node tests/check.mjs starter 或 solution 目录路径）。关键走查：/posts/post-ai-basics 有目录且锚点可跳转；/posts/post-broken 显示错误提示，dev 终端能看到明确报错。

要求

lib/mdx.ts 用 zod 校验 frontmatter（title、slug 必填字符串），不合法抛出带文件标识的错误
解析 h2 标题生成 {id, text} 目录，标题渲染出同名 id 供锚点跳转
代码围栏 ``` 成对解析为代码块；围栏不闭合抛 MarkdownError
支持 :::tip 与 :::warn 块，渲染为 components/callout.tsx 的 Callout
详情页对解析失败的文章显示「内容有问题」降级 UI（含原因），不整页白屏；未知 slug notFound()

N16 MDX 与内容系统

分层提示

先自己试，再逐层展开。

参考答案

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

MDX 正文

Command Palette

MDX 正文