Adding component files

First, add the component files to the project at hand. Since it is easier to understand the components themselves if they are managed in a hierarchical manner, we will also go over the hierarchy of components together this time.

First, create a Demo folder under src/components. The file to be created is LayoutContextData.tsx and the code is as follows.

import { useSitecoreContext } from '@sitecore-jss/sitecore-jss-nextjs';

const LayoutContextData = (): JSX.Element => {
  const { sitecoreContext } = useSitecoreContext();
  return (
    <div>
      <h2>レイアウト データ</h2>
      <pre style={{ maxHeight: '400px', overflow: 'scroll' }}>
        {JSON.stringify(sitecoreContext, null, 2)}
      </pre>
    </div>
  );
};

export default LayoutContextData;

After adding this file, deploy it to GitHub.

Add rendering to Sitecore

Create a rendering to manage the above files in Sitecore. In this case, we created the rendering under the Demo folder. Create a Demo folder under /sitecore/layout/Renderings/Project/sitecoredemo-jp.

Create a Json Rendering item under the demo folder.

The name of the item to be created should be the same as the name of the component you just created.

You can now link the created component to the rendering definition to be handled by Sitecore.

Specify as available in the placeholder

Then edit in the Horizon Editor to change the placeholder settings to specify the component. For now, the only placeholder is `jss-main`, so the target items are as follows

/sitecore/layout/Placeholder Settings/Project/sitecoredemo-jp/jss-main

Add the rendering you have created to the associated control item.

Now you can specify the rendering in the editing tools.

Adding Components to a Page

As an editing tool, this time we will launch the Horizon Editor. When launched, the contents tree is displayed on the left side, and the top page is specified. Switching this left item to the component list screen, the Demo group is displayed. From here, you can drag and drop components to place the component you have just created.

Summary

In a previous article, I described the steps for adding a component using jss scaffold. In that case, the procedure involved defining a Sitecore item and creating a component using that definition, but a simple component like this can be created by creating a file and working with rendering.

Tags

• Next.js