このテーマには、@astrojs/mdx インテグレーションが導入済みで、astro.config.mjs で設定されています。MDX を使わない場合は、設定ファイルからインテグレーションを削除すれば無効化できます。
なぜ MDX を使うのか
MDX は、Markdown に JavaScript と JSX の記法を組み合わせられる拡張形式です。これにより、Markdown コンテンツの中に JavaScript や UI コンポーネントを混在させることができ、インタラクティブなチャートや通知 UI なども扱いやすくなります。
既に MDX で作成した記事やドキュメントを持っている場合でも、Astro へ比較的スムーズに移行できます。
例
MDX では、コンポーネントを import してそのまま本文中で利用できます。例えば、以下のようなコードです。
import HeaderLink from "../../components/HeaderLink.astro";
<HeaderLink href="#" onclick="alert('clicked!')">
Embedded component in MDX
</HeaderLink>このように、Markdown だけでは表現しづらい UI を埋め込めるのが MDX の利点です。
補足
.mdは通常の Markdown 用.mdxはコンポーネントや JSX を含めたい場合に利用- インタラクティブな動作には、必要に応じて Astro の client directive が必要です