Usually, we need to create components, such as containers, to place other components and display our content in a structured way.
So let’s create a two columns component, this gonna be created as we usually do:
- Create a new JSON Rendering
- Create the component in your Next.JS application
As you realize, I’m using placeholders to define how the components will be placed and displayed. So, we need to define the placeholder settings. Let’s see how to do it.
- Create a new placeholder setting as we do it usually in the folder “/sitecore/layout/Placeholder Settings” following the Helix folder structure in this case I placed the new one in this path
If you pay attention, the placeholder name in the code is what you define in the placeholder key property.
At this point looks like is done, but is not quite yet, because we need to add these new placeholder settings to our layout service answer, otherwise our Next JSS application will fail since it is impossible to find them in the JSON response.
So, at this point, if you are using the default layout is a good idea to change it for a new one based on the default layout.
Let’s create a new Layout, following these steps:
- Go to this path “/sitecore/layout/Layouts”
- Follow the Sitecore Helix structure to select the correct folder to create your new layout
In this case, I placed my one in this path “/sitecore/layout/Layouts/Project/SUGLATAM/Presentation” and I created it as a JSS Layout, do not forget to point to this view in the path property “/Views/SXA JSS/SXA JSS Layout.cshtml”
Add in the “Layout Service” section all the new placeholder settings created previously.
and the final step is to change your content item templates to use it
and that is it.
In this way, you can use placeholders in your NextJS application.
Happy coding 😀
