カスタムコンポーネント

Methanol は components/ ディレクトリ内のコンポーネントを自動的にスキャンし、すべての MDX ページでグローバルに利用可能な状態にします。これらのコンポーネントは rEFui を通じてレンダリングされるため、JSX ランタイムや API の全機能を直接活用できます。

コンポーネントの解決ルール

• 拡張子 .jsx / .tsx / .js / .ts をサポートしています。
• ファイル名がそのままコンポーネント名として登録されます。
• プロジェクト固有のコンポーネントは、テーマが提供する同名のコンポーネントよりも優先的に読み込まれます。

構成例:

components/
  Callout.jsx
  Hero.client.jsx
  Toc.static.jsx

クライアント専用コンポーネント (.client)

ブラウザ特有の API（DOM 操作や Window オブジェクトへのアクセスなど）を必要とするコンポーネントには、.client サフィックスを付与してください。

components/ThemeSearch.client.jsx

静的コンポーネント (.static)

ビルド時にサーバーサイドでのみ評価・レンダリングしたい場合は、.static サフィックスを使用します。 クライアントコンポーネントに対応する静的コンポーネントが明示的に定義されていない場合、Methanol はクライアントコンポーネント自体を使用して静的 HTML の生成を試みます。ただし、コンポーネント内でブラウザ専用 API を直接参照している場合はエラーの原因となるため、適切なフォールバックを提供する静的コンポーネントを用意する必要があります。

components/Notice.static.jsx

定義と使用例

// components/Callout.jsx
export default function Callout({ title }, ...children) {
	return (
		<div class="callout">
			<strong>{title}</strong>
			<div>{...children}</div>
		</div>
	)
}

<Callout title="ヒント">
  段落を短く保つことで、情報の可読性を高めることができます。
</Callout>