MDX 是一種將 Markdown 和 JSX 融合在一起的格式它讓你能在Markdown文檔里直接使用React等框架的組件。這為編寫交互式的技術(shù)文檔、博客和組件庫文檔帶來了全新的可能性。?? MDX 核心語法你可以在一個.mdx文件中同時使用Markdown和JSX。Markdown 的簡潔像寫普通文檔一樣使用標(biāo)題、列表、鏈接等語法。JSX 的強大通過import引入React組件并像使用HTML標(biāo)簽一樣在Markdown中使用它們。import { Button } from ./components/Button # 這是一個普通的Markdown標(biāo)題 你可以像使用HTML標(biāo)簽一樣使用這個按鈕組件 Button點我/Button? 關(guān)鍵特性MDX 有幾個非常實用的特性能讓你的內(nèi)容創(chuàng)作更加靈活嵌入式 JavaScript 表達(dá)式在花括號{}中直接寫 JavaScript 表達(dá)式比如{1 1}或{Math.PI}。ES Module 支持使用import和export語句來管理依賴和數(shù)據(jù)。組件復(fù)用與組合這是 MDX 的核心優(yōu)勢。你可以把復(fù)雜的交互邏輯封裝在組件里然后在不同的 MDX 文件中反復(fù)使用真正實現(xiàn)“內(nèi)容與邏輯分離”。 常見應(yīng)用場景MDX 在前端開發(fā)中最常見的舞臺是構(gòu)建技術(shù)文檔站點和組件演示庫技術(shù)文檔/博客為文檔嵌入實時交互的Demo、代碼示例。幾個主流框架都有成熟的解決方案Next.js: 官方通過next/mdx提供了完整的支持配置后可以直接將.mdx文件當(dāng)作頁面使用。Rspress: 基于 Rspack 的靜態(tài)站點生成器對 MDX 有天然支持適合構(gòu)建高性能文檔站。UI 組件庫文檔用 MDX 來編寫組件文檔可以一邊寫文檔一邊展示組件甚至能直接編輯代碼并預(yù)覽效果。像Docz、Storybook等工具都利用了 MDX 的這一特性讓組件庫文檔變得生動起來。?? 以 Next.js 為例的配置以 Next.js 為例一個基礎(chǔ)的 MDX 配置通常包含以下幾步安裝依賴npminstallnext/mdx mdx-js/loader mdx-js/react types/mdx修改next.config.mjs引入next/mdx插件并將mdx添加到pageExtensions中。importcreateMDXfromnext/mdxconstnextConfig{pageExtensions:[js,jsx,md,mdx,ts,tsx],}constwithMDXcreateMDX()exportdefaultwithMDX(nextConfig)創(chuàng)建mdx-components.tsx在項目根目錄創(chuàng)建此文件用于定義全局的 MDX 組件如自定義的h1、img等這是 App Router 模式下必須的步驟。完成這些設(shè)置后你就可以在app目錄下創(chuàng)建.mdx文件它會自動成為一個頁面路由。 注意事項使用 MDX 時有幾個細(xì)節(jié)需要注意文件后綴默認(rèn)情況下只有.mdx文件會被編譯。如果需要處理.md文件需要額外配置。Frontmatternext/mdx默認(rèn)不支持 Frontmatter文件開頭的---區(qū)域。你可以使用remark-frontmatter等插件來解析它。語法差異MDX 是 Markdown 和 JSX 的混合體所以一些純 Markdown 的語法可能不適用例如縮進(jìn)代碼塊和自動鏈接在 MDX 中是不支持的。MDX 通過將 Markdown 的易寫性與 React 的靈活性相結(jié)合為構(gòu)建現(xiàn)代 Web 內(nèi)容提供了一種非常強大的模式。它讓前端開發(fā)者能夠更高效地創(chuàng)建出既內(nèi)容詳實又功能豐富的頁面。