このサイトには@astrojs/mdxを導入しています。通常のMarkdownだけでも記事は書けますが、MDXを使うと本文の中にコンポーネントを差し込めます。
MDXが向いている場面
MDXは、文章とUIを同じ記事の中で扱いたいときに便利です。たとえば、注意書きのボックス、ボタン、比較表、簡単なデモなどを、記事ごとに自然に配置できます。
一方で、すべての記事をMDXにする必要はありません。普通の文章だけで完結する記事はMarkdown、コンポーネントを使いたい記事だけMDXにするくらいが扱いやすいです。
コンポーネントを埋め込む例
下の例では、ヘッダーリンク用のコンポーネントをMDX本文の中で使っています。
MDX内のコンポーネント
注意点
- MDX内で使うコンポーネントは、記事ファイルの中でimportします。
- インタラクティブな処理が必要な場合は、Astroのクライアントディレクティブを検討します。
- 文章中心の記事では、無理にMDXを使わずMarkdownのままにします。