​
カスタムスニペットの作成

前提条件: スニペットファイルはsnippetsディレクトリに作成する必要があります。
snippetsディレクトリ内のすべてのページはスニペットとして扱われ、 スタンドアロンページとしてレンダリングされません。スニペットから スタンドアロンページを作成したい場合は、スニペットを別のファイルに インポートし、コンポーネントとして呼び出してください。

​
デフォルトエクスポート

  1. 複数の場所で再利用したいコンテンツをスニペットファイルに追加します。オプションで、スニペットをインポートする際にpropsを通じて埋められる変数を追加することもできます。
snippets/my-snippet.mdx
Hello world! これはページ間で再利用したいコンテンツです。今日のキーワードは{word}です。
再利用したいコンテンツは、インポートが機能するためにsnippetsディレクトリ内にある必要があります。
  1. スニペットを宛先ファイルにインポートします。
destination-file.mdx
---
title: My title
description: My Description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## ヘッダー

Lorem impsum dolor sit amet.

<MySnippet word="bananas" />

​
再利用可能な変数

  1. スニペットファイルから変数をエクスポートします：
snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
  1. 宛先ファイルからスニペットをインポートし、変数を使用します：
destination-file.mdx
---
title: My title
description: My Description
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Hello, my name is {myName} and I like {myObject.fruit}.

​
再利用可能なコンポーネント

  1. スニペットファイル内で、アロー関数の形でコンポーネントをエクスポートすることで、propsを受け取るコンポーネントを作成します。
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... スニペットコンテンツ ...</p>
  </div>
);
MDXはアロー関数の本体内ではコンパイルされません。可能な限りHTML構文を使用するか、MDXを使用する必要がある場合はデフォルトエクスポートを使用してください。
  1. スニペットを宛先ファイルにインポートし、propsを渡します
destination-file.mdx
---
title: My title
description: My Description
---

import { MyComponent } from '/snippets/custom-component.mdx';

Lorem ipsum dolor sit amet.

<MyComponent title={'カスタムタイトル'} />