Build a simple image gallery with Sitecore JSS / NextJS

Continuing with my Sitecore JSS setup and other related blogs, in this blog post, I create a gallery item component and use it in a Sitecore gallery page. Here are the steps:

- Establish a Sitecore route

- Export a NextJS component

- Ensure layout has a placeholder

- Create a rendering in Sitecore

- Allow the rendering in a placeholder

- Create a Data template in Sitecore

- Create a Datasource based on the template

- Add the component to the page

Separation of Concerns:

The final gallery page:

My Gallery item tsx code:

I have kept my code minimal to make the component work.  Purposefully left out withDatasourceCheck and ComponentProps for now.

Some interesting points:

1. I could have done the following instead of assigning to a constant:

2. fields and {fields} must match:

3. Export a component with matching variable name to use it:

My Data template:

The field names must match these property names in tsx also they are case-sensitive:

My CSS specific for this component:

This is referenced in main.css and main.css is referenced in _app.tsx:

main.css:

_app.tsx:

As you add more components, add CSS files in separate folders and add corresponding entry in main.css:

Since _app.tsx indirectly has reference to your component styles, you can apply the styles in your component now:

Sitecore rendering:

Component name must match exported component name in tsx

Else, you get something like this:

Datasource location and template configured:

Allow rendering within a placeholder:

Placeholder added to layout tsx:

Placeholder configured for Sitecore layout:

Editable in XPE:

Remember to serialize: