Sitecore Jss with Next Js : How to create and use dynamic placeholders?

Question

I am learning Sitecore JSS with Next Js as the front end framework. I am working in Sitecore first approach with Sitecore 10.1. I was trying to develop a three column component which will have a placeholder in each of the column and in each of the placeholder there will be some component. The issue I am facing is the name of the placeholder should be different for each of the placeholder otherwise components will repeat in each placeholder. How can we dynamically generate placeholders in Sitecore jss ?

import { Text, Field, withDatasourceCheck, RichText, Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';
import { ComponentProps } from 'lib/component-props';

type ThreeColumnProps = ComponentProps & {
 fields: {
   title: Field<string>;
   description: Field<string>;
 };
};

const ThreeColumn = (props: ThreeColumnProps): JSX.Element => (
 <div className="three-column">
   <Text field={props.fields.title} />
   <RichText field={props.fields.description} />
   <div className="column">
   <Placeholder name="jss-sample-placeholder" rendering={props.rendering} />
   </div>
   <div className="column">
   <Placeholder name="jss-sample-placeholder1" rendering={props.rendering} />
   </div>
   <div className="column">
   <Placeholder name="jss-sample-placeholder2" rendering={props.rendering} />
   </div>
 </div>
);

export default withDatasourceCheck()<ThreeColumnProps>(ThreeColumn);

Answer 1

There are 2 parts to this answer. First, you can absolutely just create your component as you have it listed above. This would create you with 3 placeholder keys:

• jss-sample-placeholder
• jss-sample-placeholder1
• jss-sample-placeholder2

You need to make sure that you create placeholder settings for these that match the keys and that your components have the placeholders assigned to them.

The only problem with the code you have, is that if you add the same component on the page more than once, the placeholder keys will conflict.

You need to add the Dynamic Placeholder Id to the placeholder key name. If you look at the OOTB Headless SXA Container component, you can see this done:

const phKey = `container-${props.params.DynamicPlaceholderId}`;

In your Placeholder Settings, your placeholder key names would become

• jss-sample-placeholder-{*}
• jss-sample-placeholder1-{*}
• jss-sample-placeholder2-{*}

This now lets you add this component to the page multiple times without a placeholder key conflict.