How to Access Rendering Properties in NextJS

With NextJS SDK, in order to use the rendering properties, first we need to import the ComponentRendering interface from sitecore-jss npm package :

import { ComponentRendering } from '@sitecore-jss/sitecore-jss';

Next we will need to bind the this interface with our local variable in the component :

export type TestProps = { rendering: ComponentRendering; };

Next we will need to destructure this local variable inside our React component using object destructuring syntax in JS :

const Test = ({ rendering }: TestProps): JSX.Element => {};

Now we get access to the local variable rendering. We can use this variable to access the properties which has been provided by the SDK.

Following are the set up rendering properties available in NextJS SDK :

• componentName - Gets the name of the rendering.

• dataSource - Gets the dataSource ID of the rendering.

• fields - Gets the fields of the datasource associated with the rendering.

• placeholders - Gets all the nested placeholders & their associated content

• params - Gets the rendering params if the rendering parameter is added to the rendering.

In order to access the rendering params, there are 2 ways :

• With rendering params :

rendering?.params?.name_of_parameter

• With ComponentParams interface :

	import { ComponentParams} from '@sitecore-jss/sitecore-jss';
	export type TestProps = { params: ComponentParams };

Then we can simply use this params variable which simply returns an object with all the fields of the rendering parameter template associated with the rendering.

That's it, this way we can access rendering properties with NextJS.