Create Hero Banner component in Next.js app using the Sitecore-first development workflow

Creating new components is one of the most common tasks while developing JSS applications. Once JSON rendering is defined and exposed to Layout service we need to create the respective component in the front end application which might be developed using React or Next.js.

Let's create a Hero Banner component which is very common component for many websites. 

Assumption - You have set up your project using the Sitecore Containers template for Next.js. If not please refer this link.

Hero Banner component mostly contains the following fields:

• Background image
• Heading / Title
• Sub-Heading/ Sub-Title 
• CTA Link

Let's proceed with the above requirement - 

Create the JSON rendering in Sitecore

To create the JSON rendering in Sitecore we need to do the following:

• Create a new template called HeroBanner in  the /sitecore/templates/Project/YOUR_PROJECT folder.

• In this template, create a new template section and add the following fields:

• Background Image - Image field
• Heading  - Single Line Text field
• Sub Heading  - Rich Text field
• CTA Link - General Link field

• In the content tree, in /sitecore/layout/Renderings/Project/YOUR_PROJECT, create a JSON rendering called HeroBanner, and set values for the following fields:

• Datasource Location field: enter ./
• Datasource Template: select sitecore/Templates/Project/YOUR_PROJECT/HeroBanner

• Add the HeroBanner rendering to the Allowed Controls in the /sitecore/layout/Placeholder Settings/Project/YOUR_PROJECT/Main placeholder and click Save.

• Now create one DataSource item from the HeroBanner template. In this example let's create this DataSource under Home item.

• Let's add this rendering to the Home page. Open /sitecore/content/YOUR_PROJECT/Home in the Experience Editor and add your new rendering to the Main placeholder and select the data source item for it which we created in the previous step.

• Publish all your item changes.

Verify the rendering's JSON output in Layout Service

To view the JSON output:

• From the file scjssconfig.json in your Next.js application root, copy the apiKey value.

• In a browser, open the URL https://cm.YOUR_PROJECT.localhost/sitecore/api/layout/render/jss?item=/&sc_apikey=<YOUR API KEY>&sc_site=<YOUR SITE NAME>&sc_mode=normal.

• The output must include your new component.

{
    "uid": "ba5d4f2d-b6f1-428a-81e8-6b7c25844c08",
    "componentName": "HeroBanner",
    "dataSource": "{A2A3F4C0-B13B-4651-B342-320E56FDC43A}",
    "params": {},
    "fields": {
        "heading": {
            "value": "Default"
        },
        "subHeading": {
            "value": "Default"
        },
        "backgroundImage": {
            "value": "Default"
        },
        "ctaLink": {
            "value": "Default"
        }
    }
}

Create the Hero Banner component in the Next.js app

In the Next.js application, you need to create a component matching the rendering you just created in Sitecore.

To create a component in a JSS Next.js Sitecore-first app:

• Create the file YOUR_PROJECT\src\rendering\src\components\HeroBannerComponent.tsx.

• In the newly created file, define a component with the same name as the rendering i.e. HeroBanner in this case.

import { RichText, Field, ImageField, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';
import { JSSLink } from '../../shared/Links/JSSLink.styles';//Used Material-UI library
type HeroBannerProps = ComponentProps & {
  fields: {
    heading: Field<string>;
    subHeading: Field<string>;
    backgroundImage: ImageField;
    ctaLink: LinkField;
  };
};
const HeroBanner = (props: HeroBannerProps): JSX.Element => {

const heroBackgroundImageValue = 'url(' + props.fields.backgroundImage.value?.src + ')';

  return (
    <div
      id="articleImage"
      className="jumbotron home"
      data-image={heroBackgroundImageValue}
      style={{ backgroundImage: heroBackgroundImageValue }}
    >
      <div className="container">
        <div className="row">
          <div className="col-md-12 col-lg-8">
            <h1>
              <RichText field={props.fields.heading} />
            </h1>
            <h3>
              <RichText field={props.fields.subHeading} />
            </h3>
          </div>
        <JSSLink key={ctaLink?.id} variant="outlined" field={ctaLink?.fields?.link} />
        </div>
      </div>
    </div>
  );
};
export default HeroBanner;

• Finally, refresh the application in the browser, usually served at http://localhost:3000 to see the changes.