Creating First Headless component - Sitecore Next JS

Hello everyone, As my learing continues in Sitecore Headless, In this blog we will see how we can create component in Sitecore Headless Next JS. We will take an example of how we can create a Footer component. Also we will try to use all Sitecore fields that are mostly use in our day to day work and how we can render those fields(Rich Text, Link, Multilist, Image, Dictionary etc.) in Headless development.

Let's describe the footer component. It has fields mentioned. Footer Label, FooterLogo with Link, Description and List of external links.

• Footer Label : Dictionary Item
• FooterLogo : (Image) with Link :(General Link)
• Description: (Richtext)
• List of external links : (Multilist)

Lets see the Sitecore Structure:

Templates

Renderings

Datasoure Item

Placeholder Settings

Home Item Presentation Details

once we add the component, we can check the same in Layout Service.

Layout Service

Now after verifying the component in Layout service, its time to build the read the layout service in next js application.

Lets see the front end code. For that first, we need to create the component with same name as per our rendering and register that in component factory.

       
import {RichText,Image,Item,LinkField,Field,ImageField,Link} from '@sitecore-jss/sitecore-jss-nextjs';
import { StyleguideComponentProps } from 'lib/component-props';
import {useI18n} from 'next-localization';

type FooterProps = StyleguideComponentProps & {
    fields :{
       footerLinks : Item & {
            fields:{
                id: string;
                link : LinkField;
            }
        }[];
        footerLogo : ImageField;
        description : Field<string>;
        footerLogoLink : LinkField;
    }
}

const Footer =  ({ fields }: FooterProps): JSX.Element => {
    const {footerLinks} = fields;
    const {t} = useI18n();

    const lincarefooterlinks = footerLinks && footerLinks.map(({fields : {id,link}}) => {
       return(
            <li key = {id}><Link field={link}/></li>
        )
    });

    return(
         <>
             <p>  {t('Footer')} </p>
            <div>
                <Image
                    field={fields.footerLogo}
                    editable={false}
                    imageParams={{ mw: 100, mh: 50 }}
                    height="50"
                    width="94"
                    data-sample="other-attributes-pass-through" />
            </div>
            <div>
                <RichText field={fields.description} />
            </div>
            <div>
                <Link field={fields.footerLogoLink}></Link>
            </div>
            <div>
                <Link field={fields.footerLogoLink}>
                    <Image
                        field={fields.footerLogo}
                        editable={false}
                        imageParams={{ mw: 100, mh: 50 }}
                        height="50"
                        width="94"
                        data-sample="other-attributes-pass-through" />
                </Link>
            </div>
            <div>
           
            </div>
            <br/>
            <div>
                <p><b>Footer Links</b></p>
                {lincarefooterlinks}
            </div> 
        </>
    );
}

export default Footer;
	   
 

Now lets understand the code little bit. By default Sitecore Next JS module give us predefined field for Reading Sitecore Fields. We just need to import that. For Example see below ImageField, Link,RichText are imported from Sitecore-jss modeule. Similarly useI18n for reading Dictionary.

       
import {RichText,Image,Item,LinkField,Field,ImageField,Link} from '@sitecore-jss/sitecore-jss-nextjs';
import { StyleguideComponentProps } from 'lib/component-props';
import {useI18n} from 'next-localization';
	   
 

Similaryly we will use typescript syntax for mapping and reading the value which is done in below snippet

       
    type FooterProps = StyleguideComponentProps & {
    fields :{
       footerLinks : Item & {
            fields:{
                id: string;
                link : LinkField;
            }
        }[];
        footerLogo : ImageField;
        description : Field<string>;
        footerLogoLink : LinkField;
    }
}
	   
 

After that its basic next js component creation and utilizing the above component imports

       
    const Footer =  ({ fields }: FooterProps): JSX.Element => {
    const {footerLinks} = fields;
    const {t} = useI18n();

    const lincarefooterlinks = footerLinks && footerLinks.map(({fields : {id,link}}) => {
       return(
            <li key = {id}><Link field={link}/></li>
        )
    });

    return(
         <>
             <p>  {t('Footer')} </p>
            <div>
                <Image
                    field={fields.footerLogo}
                    editable={false}
                    imageParams={{ mw: 100, mh: 50 }}
                    height="50"
                    width="94"
                    data-sample="other-attributes-pass-through" />
            </div>
            <div>
                <RichText field={fields.description} />
            </div>
            <div>
                <Link field={fields.footerLogoLink}></Link>
            </div>
            <div>
                <Link field={fields.footerLogoLink}>
                    <Image
                        field={fields.footerLogo}
                        editable={false}
                        imageParams={{ mw: 100, mh: 50 }}
                        height="50"
                        width="94"
                        data-sample="other-attributes-pass-through" />
                </Link>
            </div>
            <div>
           
            </div>
            <br/>
            <div>
                <p><b>Footer Links</b></p>
                {lincarefooterlinks}
            </div> 
        </>
    );
}

export default Footer;
	   
 

Once your run the front end application you should see the output now.

In this blog, we have covered all the basic fields of Sitecore that we use and we should we aware how its mapped and read in front end application.

Thanks for reading, will be back with more blogs with my learning experience

Happy Sitecoring!!!, Happy Learning!!!