Make your Next.js component content-editable

We'll delve into the process of making your Sitecore component content-editable in a Next.js environment. This can be achieved by leveraging the SitecoreContext object, which can be accessed using the useSitecoreContext hook.

The approach we'll be taking is accessing the fields of the current Sitecore item accessed by the route. If you are familiar with traditional Sitecore approach, it will be akin to accessing the fields of the Sitecore.Context.Item but done in a headless, Next.js way.

Create a Sitecore template

In the Content Editor,

1. Navigate to /sitecore/templates/Feature
2. Create a Template Folder named Article
   1. Under Feature, right click, Insert > Template Folder
3. Create a template under that also named Article
   1. right click, Insert > Template
4. Add a new section named Article
5. Add fields
   1. Add a field named Title and type as Single-Line Text
   2. Add a field named Body and type as Rich Text

Update the home template

We will utilize Sitecore's template inheritance to bring in fields from the template was just created onto the template used by the home page.

1. Navigate to /sitecore/templates/Project/xmnextjs/App Route
2. Click Content
3. Navigate to the Article template we created, and double click to select
4. Save
5. Navigate to the home item and enter some data.
6. Publish all your changes

Sitecore Layout Service

To verify data about our home page, we will look at the data returned by the Sitecore Layout Service. This will be populated into the SitecoreContext object and is accessible by useSitecoreContext hook in Next.js.

1. In Visual Studio Code, look in src/rendering/scjssconfig.json and copy the apiKey value.
2. In a browser, open https://cm.xmnextjs.localhost/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR API KEY}&sc_mode=normal
3. You should see something like below. If not, ensure you've published all items in Sitecore.

...
"route": {
    "name": "home",
    "displayName": "home",
    "fields": {
        "pageTitle": {
            "value": "Welcome to Sitecore JSS"
        },
        "Title": {
            "value": "My first article"
        },
        "Body": {
            "value": "This is my first article"
        }
    },
}

Update component

In Visual Studio Code, update your component. The first 3 imports from @sitecore-jss/sitecore-jss-nextjs are fields and field types to help render data from Sitecore. The last import is to the useSitecoreContext hook which gives access to the data populated into the SitecoreContext object which corresponds to the data returned by the Sitecore Layout Service for the route.

We will declare a type which maps properties to the field names defined in the Sitecore template. Your property names should match the field names defined in the Sitecore template.

We will then get the data from the sitecoreContext, map it to the fields, and return the JSX rendering.

import {
    Text,
    Field,
    RichText,
    useSitecoreContext
} from '@sitecore-jss/sitecore-jss-nextjs';
 
type ArticleFields = {
    Title: Field<string>;
    Body: Field<string>,
};
 
const Article = (): JSX.Element => {
    const { sitecoreContext } = useSitecoreContext();
    const fields = sitecoreContext.route?.fields as ArticleFields;
 
    return (
        <section>
            <Text tag="h1" field={fields.Title} />
            <RichText field={fields.Body} />
        </section>
    )
};
 
export default Article