Sitecore JSS/NextJS Page using Custom Contents resolver

Recently I came across custom rendering contents resolver implemented in a NextJS project. While it seems nice to plugin some last moment code before the view displays the same, personally, I feel this must be used judiciously since it might affect the rendering time. So, better not to put loops, complex calculations there. Nevertheless, there is nothing wrong in knowing a concept, implementing it in an example and blogging about it to really understand the pros and cons and hence this blog.

Github

A diagram of what is covered in this blog, albeit a complicated way to represent:

Note that the override list is a separate concept unrelated to the rendering content resolver. The overriding is just used to map one field in source to destination and explained here since it is used in this example.

High-level steps of what is covered in this blog:

1. Create reference data or source template

2. Create destination or rendering data source template

3. Create Override Details (what field in destination maps to what value in source)

4. Create a link to reference data

5. Use 3 and  create a Override List (will stay under the destination data source)

6. Inherit the rendering data source template (or destination) from 4 and 5

7. Create a custom rendering resolver class in C# and add the business logic

8. To the rendering, add the resolver

9. In the page, add the rendering with the data source pointing to 6

Detailed Steps:

Modify json files to implement serialization:

Here is my Reference Data template:

My Integration templates:

FieldOverride (OverrideList) template:

LotterySelection template that allows to point to a lottery item from reference data in content tree:

OverrideDetails template: What field to override (destination) with what value (source or reference data)

My page with two different components:

The first component just uses model binding while the second one applies a business logic using custom contents resolver.

The datasource with override list: This is the target content used by the custom rendering contents resolver

My sln structure:

My custom resolver code that applies some business logic to fields:

My simple NextJS Component:

import { Text, RichText, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';

type NewLotteryHeaderProps = {

fields: {

    LotteryNo: Field<string>;

    Title: Field<string>;

  };

};

const NewLotteryHeader = ({ fields }): JSX.Element => (

  <div>

    <hr/>

    <h2>Lottery Header from Rendering Contents Resolver</h2>

    <Text field={fields.LotteryNo} /><br/>

    <Text field={fields.Title} />   

    <hr/>

  </div>

);

export default withDatasourceCheck()<NewLotteryHeaderProps>(NewLotteryHeader);

Corresponding NextJS rendering:

If no NextJS component is created, this message is displayed in Experience Editor:

JSS component is missing React implementation. See the developer console for more information.

My end-result (with simple business logic applied):