Implementing a new component in Headless SXA and Next.js

Posted in :

rbatallas

July 20, 2024

Implementing a new component in our Next.JS application with Headless SXA differs greatly from our traditional MVC Sitecore solution.

As you know, in the traditional MVC solution, we mainly use “View Renderings” or “Controller Renderings” depending on the requirement.

So for Next.JS, we need to use a new Rendering type, this one is “JSON Rendering”. inside this rendering, you will find the “Data” section containing the “Component Name” field. In this field, you have to write the Component tsx file to match the implementation in your Next.JS application.

In this example, I will create a hero banner from scratches and follow the helix principles.

Inside your Sitecore instance Go to this path “/sitecore/layout/Renderings/Feature” and create the folder structure for your new Component

I will use this path “/sitecore/layout/Renderings/Feature/SUGLATAM/Hero”

And inside this new folder, I will choose the “JSON Rendering” option.

“Hero Banner” is my new component, so I gonna write the component name in the field mentioned before.

I’m gonna use this template to use it as a data source in my component

Now, let’s create the component in the Next.JS application

Create a new tsx file inside the components folder with the name “HeroBanner.tsx”

Add the following:

Imports

import { Field, ImageField, LinkField, Text, Link } from '@sitecore-jss/sitecore-jss-nextjs';
import React from 'react';

map your data source template

type HeroBannerProps = {
  fields: {
    Title: Field<string>;
    Description: Field<string>;
    Image: ImageField;
    CTA: LinkField;
    CTAText: Field<string>;
  };
};

Implement your component

const HeroBanner = (props: HeroBannerProps): JSX.Element => {
  return (
    <>
      <section id="banner" style={{ backgroundImage: `url(${props.fields.Image.value?.src})` }}>
        <div className="g-w">
          <div className="g-p">
            <div className="g-g">
              <div className="g-u-1 g-u-lg-1-2">
                <h1>{props.fields.Title.value}</h1>
                <p>{props.fields.Description.value}</p>
                <Link field={props.fields.CTA} className="btn red bold big">
                  <Text field={props.fields.CTAText} />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};
export default HeroBanner;

it should look like this