How To Use Complex Field Types in NextJS

With NextJS SDK, in order to render Any List Item, first we need to import the Item & other relevant field interfaces from sitecore-jss npm package :

import { Item, Text, Field, RichText, Image, ImageField } from '@sitecore-jss/sitecore-jss-nextjs';

Next we will need to bind the Item array with our local list variable in the component :

type TestProps = { fields: { Title: Field<string>; Description: Field<string>; Image: ImageField;MultiList: Item[]} }

Kindly Note that the value of local variable should be the same as that of the value of Sitecore field.

Next we will need to destructure this local variable inside our React component using object destructuring syntax in JS :

const Test = ({ fields }: TestProps): JSX.Element => {};

All of these complex field types (Multilist, Multilist With Search, Treelist, TreelistEx) returns an Item array which we have to iterate to get the field values :

{MultiList && MultiList.map((listItem) => { return ( <div key={listItem.id}> <Text field={listItem.fields.Title as Field<string>} /> <RichText field={listItem.fields.Description as Field<string>}></RichText> <Image field={listItem.fields.Image as ImageField} /> </div> ); })}

For a react component, if we want to render a list i.e after iterating over an array, then the parent element must be passed a key prop, value of the prop must be unique. This helps react to keep track of the current item that's been rendered on the page.

If we don't pass the key prop, then we get following error in the console, although it doesn't cause any breaking of the page :

To avoid this, we passing an ID of the current Item that' been rendering, as in our case ID will be the Sitecore GUID, which will always be unique.

It's similar to the approach which we used to use while rendering these complex field types in MVC. There also for all these fields, we used to use MultilistField data type. Similarly in this appraoch as well all these complex field types returns an Item [] array.

For rendering a DropTree Field, approach is slightly different, although it is also a reference type field, it only contains one value at a time & hence it doesn't return an Item [] array, instead it only returns an Item item :

const DropTree = fields.DropTree;

{DropTree && ( <> <Text field={DropTree?.fields?.Title as Field<string>} /> <RichText field={DropTree?.fields?.Description as Field<string>}></RichText> <Image field={DropTree?.fields?.Image as ImageField} /> </> ) }

That's it, this way we can render any complex field (Multilist, DropList etc..) in NextJS.