The multiple content reference is a field that allows you to link multiple pieces of content managed by a different API.
It is used to associate multiple categories with an article or to select and link multiple related articles, facilitating information sharing and establishing relationships.

How to Upload Data

• The basic operation method is the same as the Content Reference Field.
• For multiple content reference fields, you can select multiple contents at once.

Additional Information

• The order of the selected contents can be rearranged by dragging and dropping.

Please refer to the following documents for uploading using API and CSV.

Checking Referenced Content

If a specific content is referenced by other contents, a button labeled [Referenced n times] will appear in the upper right corner of the content detail screen, allowing you to check the current number of references.
Clicking this button will display a list of the referencing contents in a modal window.

Limitations / Notes

• If you do not have viewing permissions for the API that is the reference destination, you will not be able to select content or check the selection status.
• If the selected content is in draft or has been unpublished, it will not be included in the API response. However, if your API key has permissions for "Retrieve all draft content" or "Retrieve all unpublished content," it can be obtained.
• As a known issue, there may be cases where "Referenced 0 times" is associated with content that is not referenced. For more details, please refer to the help article "What should I do if 'Referenced 0 times' is associated with unreferenced content and I cannot delete it?".

Advanced Settings

Response Format of GET API

Please refer to the documentation below for details.

How to Use in Frontend

The multiple content reference field returns data in the form of an array of objects, so you can display the referenced information using a loop.
Below is an implementation example in Next.js that shows a list of related articles on the article detail page.

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

  // Fetch data using the microCMS JavaScript SDK (https://github.com/microcmsio/microcms-js-sdk)
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  return (
    <main>
      <h2>Related Articles</h2>
      <div>
        {/* relatedArticles is the field ID. Please replace it with the actual field ID */}
        {data.relatedArticles.map((article) => (
          <article key={article.id}>
            <Link href={`/blog/${article.id}`}>
              <Image
                src={article.eyecatch.url}
                alt={article.eyecatch.alt || ""}
                width={200}
                height={120}
              />
              <p>{article.title}</p>
            </Link>
          </article>
        ))}
      </div>
    </main>
  );
}