Next.js 快速查阅

如何使用 Markdown 和 MDX

查看官方文档介绍

Markdown 是一种轻量级的标记语言，用于格式化文本，允许使用纯文本语法进行书写，Next.js 可以将其转换为结构上有效的 HTML，非常适合在网站和博客撰写内容；

比如：I **love** using [Next.js](https://nextjs.org/)

输出：<p>I <strong>love</strong> using <a href="https://nextjs.org/">Next.js</a></p>

渲染：

I love using Next.js

• MDX 是 Markdown 的超集，允许直接在 Markdown 中编写:
  • JSX
  • JavaScript 表达式
  • ESM 的 import / export 语句
  • 能够为内容添加动态交互并嵌入 React 组件；

比如：井字棋游戏

实际的代码是：

- [MDX](https://mdxjs.com/docs/what-is-mdx/) 是 `Markdown` 的超集，允许直接在 `Markdown` 中编写:
   - [JSX](https://react.github.io/jsx/) 
   - JavaScript 表达式
   - ESM 的 `import` / `export` 语句
   - 能够为内容添加动态交互并嵌入 `React` 组件；
 
比如：[井字棋游戏](https://react.dev/learn/tutorial-tic-tac-toe)
 
<Game />

• Next.js 支持两种 MDX 内容来源：
  • 本地 MDX：存放在应用程序内部
  • 远程 MDX：在服务器端动态获取
• Next.js 插件负责将 Markdown 和 React 组件转换为 HTML
  • 支持在 Server Components 中使用（App Router 的默认模式）
  • 包括静态导出的形式

安装依赖项

# pnpm
pnpm add @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
# npm
npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
# yarn
yarn add @next/mdx @mdx-js/loader @mdx-js/react @types/mdx
# bun
bun add @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

• @next/mdx
  • 总开关
  • Next.js 官方插件，配置 Next.js 使其能识别并处理 .mdx 文件，是整个链路的入口
• @mdx-js/loader
  • 编译
  • Webpack loader，负责在构建时将 .mdx 文件编译转换为 JS，@next/mdx 在底层依赖它完成实际编译工作 MDX
• @mdx-js/react
  • 组件替换
  • 提供 MDXProvider 组件，通过 Context 统一替换 MDX 中 Markdown 元素对应的 React 组件（比如把所有 h1 换成自定义的标题组件）
• @types/mdx
  • TS 类型
  • TypeScript 类型声明包，让 TS 项目能正确识别 .mdx 文件的类型，不报错

配置 next.config.mjs