Using placeholders in JSON renderings with NextJS

With NextJS SDK, in order to use the placeholders, first we need to import the Placeholder & ComponentRendering interfaces from sitecore-jss npm package :

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

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

export type TestProps = { rendering: ComponentRendering; };

Next we 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.

Next to render a placeholder in the component, all we have to do is to use the Placeholder component itself :

<Placeholder name="LeftColumn" rendering={rendering} />
<Placeholder name="RightColumn" rendering={rendering} />

Although Unlike MVC, added Placeholder component in the code, doesn't automatically add them in the component in experience editor, we have to specifically configure them in the LayoutService section of the JSON rendering to render them for us :

Also we have to specify the same key for the placeholders which we have defined in the code :

If we want to render the placeholders on the layout in JSS, then instead of JSON rendering, we just need to add them in that layout's Layout Service section's Layout Service Placeholder field. All other steps are exactly same.

That's it, this way we can add the placeholders either in JSON renderings or in the JSS layouts.