Step 1:
Create a rendering
Navigate to the path /sitecore/layout/Renderings/Project
Create a rendering folder
Next,Right click ---> insert, and select Rendering Folder
Name it Banner.
Create a json rendering
Navigate to the Learning folder Already I have created.
Next, Right click --> insert, and select Json Rendering.
Name the rendering Banner as well.
Note :Â The component is named "Banner," as indicated in the Component Name field.
Step 2:
Add rendering to Placeholder Settings
Note : We'll include our newly created "Learning" component in the list of renderings that the Main placeholder is permitted to have.
Navigate to the path - /sitecore/layout/Placeholder Settings/Project/Learning/Main, Then I have Already Created.
Note: Please be aware that you need to click on the "Main" item in Sitecore. This is because, although the item is named "Main," its Display Name remains "Main."
Under Allowed Controls click on the edit.
Navigate to the Banner component, and double click to select (alternatively, click the right arrow next to Selected.
Make sure Banner is on the right side under Selected.
Click on the OK.
You will see that Banner is now in the Allowed Controls field.
Click on the Save to save the Main Placeholder Setting item.
Step 3:
Add rendering to a page
Navigate to the path - /sitecore/content/Learning/www/Home.
Click on the Publish > Experience Editor. The Experience Editor is where we can preview and edit how our page looks.
I can't find the component in the experience so we need to add it in available renderings.
Add the rendering item by navigating to /sitecore/content/Learning/www/Presentation/Available Renderings/Navigation.
Save the item and go to the experience editor.
Step 4:
I have Creating a Banner Component in Nextjs app.
Open the Visual Studio.
Next Created folder src\components\Feature
Create File Name is Banner.tsx.
Note : You have create to component in your Next.js application, you'll observe the changes in both the Experience Editor and the Next.js app if it's in connected mode.
Step 5:
I have a sample code for a Next.js app.
Code: Banner.tsx
import Head from 'next/head';
const Banner = (): JSX.Element => (
<section>
<div>
<Head>
<title>Banner Page</title>
</Head>
<div className="hero-image">
<div className="hero-text">
<h1 className="heading">I am John Doe</h1>
<p>And I'm a Photographer</p>
<button>Hire me</button>
</div>
</div>
<style jsx>{`
p {
font-size: 18px;
padding:15px 0px;
}
.hero-text {
text-align: center;
padding:70px 20px;
background-color: #007bff;
color: #ffffff;
}
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: deeppink;
color:white;
text-align: center;
cursor: pointer;
border:none;
border-radius:5px;
}
.hero-text button:hover {
background-color: red;
color: white;
}
.heading{
font-size:50px;
padding:15px 0px;
}
`}</style>
</div>
</section>
);
export default Banner;
Step 6:
I've integrated it into the Experience Editor, and it automatically generates a localhost in connected mode.
Arul Pushpam,
Sitecore Developer,
A dedicated Sitecore developer with a passion for staying ahead in the ever-evolving world of technology. With a keen eye for innovation and a commitment to excellence, I specialize in crafting exceptional digital experiences using the latest Sitecore advancements.