ソフトウェア開発の基本原則のひとつに DRY（Don’t Repeat Yourself）があります。これはドキュメントにも当てはまります。複数の場所で同じ内容を繰り返している場合は、コンテンツの一貫性を保つためにカスタムスニペットを作成しましょう。

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

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

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

  1. 再利用したいコンテンツをスニペットファイルに追加します。必要に応じて、スニペットをインポートする際に props で埋め込める変数を追加できます。 この例では、変数は word です。
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages.
  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/>

​
変数を使ったエクスポート

  1. 必要に応じて、スニペットをインポートする際に props で埋め込める変数を追加できます。この例では、変数は word です。
snippets/my-snippet.mdx
My keyword of the day is {word}.
  1. 変数を指定してスニペットを出力先ファイルにインポートします。プロパティは指定どおりに埋め込まれます。
destination-file.mdx
---
title: My title
description: My Description
---

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

## Header

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}.

​
JSX スニペット

  1. スニペットファイルから JSX コンポーネントをエクスポートします（詳細は React components を参照）:
snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  )
}
重要: JSX スニペットを作成する際は、関数宣言ではなくアロー関数構文（=>）を使用してください。このコンテキストでは function キーワードはサポートされていません。
  1. 使用先のファイルでスニペットをインポートし、コンポーネントを使用します:
destination-file.mdx
---
title: My title
description: My Description
---

import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';

<MyJSXSnippet />