How can related fields such as SpotlightPage (type: page) and SpotlightImage (type: media) be retrieved from child items in a Sitefinity dynamic module using the REST SDK?
Why do these related fields not return data even when they are included in the fields array of the RestClient.getItems request?
What configuration is required in Sitefinity to ensure related data fields are accessible via the REST SDK?
How should these related fields be handled in the frontend (e.g., Next.js) to properly render their content?

Related fields like pages and media are not returned by default because they require proper configuration in Sitefinity as related data types. Unlike standard fields, they are returned as arrays of objects and must be handled accordingly in both the REST SDK request and frontend rendering.

To retrieve related fields such as SpotlightPage (type: page) and SpotlightImage (type: media) from child items in a Sitefinity dynamic module using the REST SDK:

1 - Ensure proper configuration
Related fields must be set up in Sitefinity as either related data or related media fields.

2 - Include related fields in the request
Add the related field names to the fields array in the RestClient.getItems call.

fields: ['Id', 'Title', 'SpotlightTitle', 'SpotlightPage', 'SpotlightImage']

3 - Backend implementation
Use a helper function like getMenuTree to fetch parent and child items along with related fields.

const childResponse = await RestClient.getItems({
  type: 'Telerik.Sitefinity.DynamicTypes.Model.Menu.MenuItem',
  filter: { ParentId: parent.Id },
  fields: ['Id', 'Title', 'SpotlightTitle', 'SpotlightImage', 'SpotlightPage'],
  culture,
});

4 - Frontend rendering
In your Next.js component, check if the related fields are arrays and render them accordingly:

import React, { useEffect, useState } from 'react';
import { getMenuTree } from './menuTree';
import { SdkItem } from '@progress/sitefinity-nextjs-sdk/rest-sdk';

interface MenuGroup {
  parent: SdkItem;
  children: SdkItem[];
}

interface Props {
  culture: string;
}

const MenuWidget: React.FC<Props> = ({ culture }) => {
  const [menuGroups, setMenuGroups] = useState<MenuGroup[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const data = await getMenuTree(culture);
        setMenuGroups(data);
      } catch (error) {
        console.error('Error fetching menu data:', error);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [culture]);

  if (loading) return <div>Loading menu...</div>;

  return (
    <div>
      <h1>Menu Tree</h1>
      {menuGroups.map((group, index) => (
        <div key={index} style={{ marginBottom: '2rem' }}>
          <h2>Parent title: {group.parent.Title ?? 'Untitled Menu'}</h2>
          <ul>
            {group.children.map((child) => (
              <li key={child.Id}>
                <strong>Child Title: {child.Title}</strong>

                {/* Related Media */}
                {Array.isArray(child.SpotlightImage) && child.SpotlightImage.length > 0 && (
                  <div>
                    {child.SpotlightImage.map((media: any, idx: number) => (
                      <div key={idx}>
                        <span>Media Title: {media.Title}</span>
                        {media.Url && (
                          <a href={media.Url} target="_blank" rel="noopener noreferrer">
                            View Media
                          </a>
                        )}
                      </div>
                    ))}
                  </div>
                )}

                {/* Related Pages */}
                {Array.isArray(child.SpotlightPage) && child.SpotlightPage.length > 0 && (
                  <div>
                    {child.SpotlightPage.map((page: any, idx: number) => (
                      <div key={idx}>
                        <span>Page Title: {page.Title}</span>
                        {page.ItemDefaultUrl && (
                          <a href={page.ItemDefaultUrl} target="_blank" rel="noopener noreferrer">
                            Visit Page
                          </a>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

export default MenuWidget;