The content reference is a field that allows you to link content managed by another API.
It is used to associate information such as linking an "author (from another API)" to an article or linking a "category (from another API)" to a product, facilitating information sharing and relationships.
Clicking on the field will display a modal window with a list of reference content, from which you can select the content you want to link.
For uploading using API and CSV, please refer to the following documentation.
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.
Setting Item | Description |
|---|---|
Required Field | When set to ON, input is required during submission. |
Description | This is the description displayed on the submission screen. |
Referenced Content | Select the API to reference. This can only be selected when creating a new entry. |
Items Displayed on the List Screen | You can select items to display on the contents list screen from Content ID or text field items. If the specified item does not exist, the Content ID will be displayed instead. |
Default Value | You can set the default value for submission. |
Please refer to the documentation below for details.
The content reference field returns data in object format, so you specify the properties (field IDs) of the referenced content to display the information.
Below is an implementation example in Next.js that displays the author (writer) information linked to the article details.
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>
<h1>{data.title}</h1>
{/* writer is the field ID. Please replace it with the actual field 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>
);
}