top of page
div.main-title-section-bg (1).png

Blog Detail

Home / About

Empower Your Projects with Next.js - The Future of Web Development!


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.

bottom of page