Basic First Component In Headless Code

Up to this point most of the work we have done has centered around environment setup and content information architecture within Sitecore, now we will switch gears and start to investigate how the Sitecore Next.js SDK provides support for creating hybrid-headless sites.

!!! important Naming Is Everything One of the most critical things to keep in mind while working with Sitecore Headless, is that the naming conventions are key. The system uses name-matching to parse the rendering JSON as it constructs the page. If the name is mis-matched nothing will display or you will only get partial displays of things.

**Matching includes capitalization, spaces, and special characters in how fields and components are named.**

The rendering site (https://rainflytours.com) is at its core just another Next.js application that retrieves content for display from Sitecore through either a GraphQL endpoint or a more traditional REST API (call the Layout Services). Beyond just basic content such as text and images, Sitecore provides the actual page assembly of how the page looks.

Getting Started in the Site

Our goal for this article is to provide enough HTML and logic that the author can add content to the Promo and it will render for us both when editing and as a site visitor. A deeper look at the inner workings will be found in future articles.

  1. In VS Code open either the full RainflyTours directory or the sub-directory /src/rendering/rainflytours.

As this tutorial series leverages Next.js (so ReactJS at its core) ‘props’ are heavily used by the SDK logic to move content from retrieval to component. Therefore, the first bit of code to write is a model class that represents the Promo’s datasource.

  1. Create a new directory under src called models.
  2. In the new models directory, create a new TypeScript file named Promo.model.ts
  3. When creating the model type it must include a fields object which then contains the list of fields as created in the mirrored Sitecore template.
import { Field, ImageField, LinkField } from '@sitecore-jss/sitecore-jss-nextjs';

export type PromoModel = {
    fields: {
        Headline: Field<string>;
        SubHeadline: Field<string>;
        Copy: Field<string>;
        Photo: ImageField;
        ActionLink: LinkField;
    };
};

Having a type defined to represent our component’s datasource template, we can create the component itself. When adding components to the site, there are a couple of key rules that must be followed:

A. They must be created as children (or grandchildren) to the **components** directory, to allow the default settings to easily find it for rendering.
B. All components are a TypeScript based React files thus use the extension *.tsx*
C. The name of the file (component) must be thse same as the rendering artifact that was created within Sitecore.
  1. Right click components directory, add a new file named Promo.tsx.
  2. To the file add import statement to load in the rendering controls for Text, Rich Text, and Images. These helper controls are provided via the JSS SDK, and handle proper rendering HTML for editing experience as well as display rendering.
import { Text, RichText, Link } from '@sitecore-jss/sitecore-jss-nextjs';
  1. Next, an import needs to be added to allow type-checking for out datasource model.
import { PromoModel } from 'src/models/promo.model';
  1. Finally, an export function of the rendering is added:
const Promo = (props: PromoModel): JSX.Element => (
    <div>
        <h1>
            <Text field={props.fields.Headline} />
        </h1>
        <RichText field={props.fields.Copy} />
        <Link field={props.fields.ActionLink} />
    </div>
);

export default Promo;
  1. Log into Sitecore, https://cm.rainflytours.com/sitecore, and open the Content Editor
  2. From the Content Editor open the Home page (/sitecore/content/rainflytours/Home) in Experience Editor. You will now be able to edit the Headline, Copy, and ActionLink field.
  1. Populate the fields, and save your work.
  2. After saving everything, visit https://rainflytours.com which should result in seeing the simple Promo component.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.