In this article, we will walk you through the steps required to develop a component in Sitecore using Next.js. To add more context, and help you understand better we will assume the below scenario. We will create a testimonial component in Sitecore Next.js.

For this, you need to have a Sitecore instance with a JSS module, and a Next.js application connected to Sitecore. Find the demo in the below steps.

Next.js application Sitecore

Alignment: Centre-aligned

View Type: Card View

Approach: Sitecore First Approach

Content Details:

  • Card Title
  • Round Avatar
  • Testimonial Detail
  • Authors
  • Author Designation

 

Architecture:

Next.js Architecture

Start with Setting Up Sitecore

Step 1: Template Creation

  • Go to Templates-> Locate project folder -> Create a template for the Testimonial component. Next, you create cards and provide their source (Item ID) to the Cards field.

    Note:     This folder will be created when you connect and deploy your Next.js application with Sitecore.
    Deploying Next.js application with Sitecore

  • Under the same folder, create a template to define the cards of the testimonial.

Creating template in Next.js application

Step 2: Creating Rendering

  • Navigate to the project folder under Renderings and insert a JSON Rendering.

    JSON Rendering
  • Provide desired content resolver to the rendering.

Content Resolver JSON Rendering

Step 3: Creation of Page and Rendering Component 

  • Create an App Route for the redirecting request to the desired page.

App Route for Redirecting Component

Step 4: Creating Data for Page  

  • Navigate to content folder -> Create new folder -> Choose the template which you have recently designed.
    Creating Data for Page in Next.js
  • Create a separate folder for Cards, now create cards using Template you made in the above steps.

    Creating separate folder for Cards in Next.js
  • After creating cards fill in all the necessary details.
    Creating separate folder for Cards in Next.js
  • Choose the cards you want to select.

Creating separate folder for Cards in Next.js

Step 5: Adding Rendering to Your Page  

  • Go to Presentation-> Details-> Add Rendering-> Choose Place Holder for rendering.
    Adding Rendering to Your Page in Next.js
  • Provide the Data Source that you have created.

Provide the Data Source in Next.js

Provide the Data Source in Next.js

Setting Up Your Next.js Application

1. Scaffold the Component you have just created.
Setting Up Next.js Application

2. Implement the desired code changes on the scaffolded component.
Setting Up Next.js Application

Setting Up Next.js Application

3. Provide CSS to your component.
Provide CSS component

4. Deploy the application to Sitecore.
Deploying application to Sitecore

5. Connect the Next.js application.
Connecting Next.js application

 

Final Output

Creating Sitecore component using Next.js

And that’s it. Creating a component using Next.js in Sitecore is that easy. In case you have any queries about the implementation of Sitecore JSS and Next.js, reach out to our experts today.


Need Help?