Let’s Talk

We would love to hear from you. Want to know more about
our services or have any questions? Say Hi!

Integrate Next.js application to Sitecore Experience Editor

November 2, 2022
Integrate Next.js application to Sitecore Experience Editor
Mitesh Patel
Mitesh Patel
Technical Head
integrate-next-js-application-to-sitecore-experience-editor

In this blog, we will see steps to integrate the Next.js application into the Sitecore experience editor.We need to add JssEditingSecret value in Sitecore as well as in the Next.js application. Both these values should match experience editor work.

Before making changes make sure the Sitecore/config/sitecore-jss-app.config file has the three values

serverSideRenderingEngine=”http” serverSideRenderingEngineEndpointUrl=”http://localhost:3000/api/editing/render” serverSideRenderingEngineApplicationUrl=”http://localhost:3000″

integrate-next-js-application-to-sitecore-experience-editor
  1. Sitecore Configuration

    We will apply the Sitecore configuration using a path config file.

    Open your application config file sitecore/config/sitecore-jss-app.config and add JavaScriptServices.ViewEngine.Http.JssEditingSecret value. This value could be any value but should contain at least 16 characters length

    integrate-next-js-application-to-sitecore-experience-editor

    Once you made the above change, publish this config using below command. Make sure you are running the terminal in Administrator mode

    jss deploy config

    integrate-next-js-application-to-sitecore-experience-editor
  2. Next.js application configuration

    Open .env file in your next.js application and add the same value to JSS_EDITING_SECRET key.

    integrate-next-js-application-to-sitecore-experience-editor

    Run the application using jss start:connected

    Go to Sitecore content editor and open any page in Experience editor. Now you will be able to view the page in Experience editor.

    integrate-next-js-application-to-sitecore-experience-editor

YOU MAY ALSO LIKE