コンテンツ参照は、別のAPIで管理しているコンテンツを紐付けることができるフィールドです。
記事に対して「著者（別API）」を紐付けたり、商品に対して「カテゴリ（別API）」を紐付けたりするなど、情報の共通化やリレーションを持たせる際に利用します。

データの入稿方法

フィールドをクリックすると参照先のコンテンツ一覧がモーダルウィンドウで表示されるので、その中から紐付けたいコンテンツを選択します。

補足

• 絞り込みコンテンツ数が多い場合は、左上の検索窓を使って目的のデータを絞り込めます。
• 「表示項目の編集」から、一覧に表示する項目をカスタマイズして、選択しやすく調整できます。
• 参照したいデータが未登録の場合、右上の[＋ 新規作成]ボタンからその場で作成し、保存後に一覧から選択して紐付けることができます。

API、CSVを利用した入稿については以下のドキュメントをご参照ください。

参照元コンテンツの確認

特定のコンテンツが他のコンテンツから参照されている場合、コンテンツ詳細画面の右上に[被参照n件]というボタンが表示されるので、現在の被参照数を確認することができます。
このボタンをクリックすると、そのコンテンツを引用している参照元のコンテンツ一覧がモーダルウィンドウで表示されます。

制限事項／注意事項

• 複数のコンテンツを紐づけたい場合は「複数コンテンツ参照」を使用してください。
• 参照先となるAPIの閲覧権限がない場合、コンテンツの選択や選択状況の確認を行うことができません。
• 選択したコンテンツが下書き中や公開終了の場合はAPIレスポンスには含まれません。APIキーに「下書きコンテンツの全取得」や「公開終了コンテンツの全取得」の権限がある場合は取得可能です。
• 既知の不具合として、参照されていないコンテンツに「被参照◯件」が紐づいているケースがあります。こちらの詳細については、ヘルプ記事「参照されていないコンテンツに「被参照◯件」が紐づいており削除できません。どうすればいいですか？」をご参照ください。

詳細設定

GET APIのレスポンス形式

詳細は以下のドキュメントをご参照ください。

フロントエンドでの利用方法

コンテンツ参照フィールドはオブジェクト形式でデータが返されるため、参照先のプロパティ（フィールドID）を指定して情報を表示します。
以下はNext.jsで、記事詳細に紐付けられた著者（writer）の情報を表示する実装例です。

export default async function Page({ params }) {
  const { slug } = await params;

  // microCMS JavaScript SDK（https://github.com/microcmsio/microcms-js-sdk）を使用してデータを取得
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  return (
    <main>
      <h1>{data.title}</h1>

      {/* writer はフィールドIDです。実際のフィールドIDに置き換えてください */}
      <div>
        <Image
          src={data.writer.profileImage.url}
          alt={data.writer.profileImage.alt || ""}
          width={100}
          height={100}
        />
        <h2>{data.writer.name}</h2>
        <p>{data.writer.description}</p>
      </div>

      <div>{data.content}</div>
    </main>
  );
}