If you have already statically generated your existing MVC application using Sitecore Headless Services and JSS, you can start converting MVC/Razor components to React/Next.js components.
These recommendations assume you have already set up your MVC and JSS applications for static generation using Sitecore Headless Services and JSS.
The conversion process must be top-down, meaning that you must start with converting the outermost components and work your way in, as shown in the following diagram:
To illustrate the process, in this example, we use a fictional rendering named Hero Banner.
If your existing MVC component exposes additional placeholders, you must also configure the Layout Service Placeholders on the component to ensure child components render in the Layout Service.
To convert the MVC component Hero Banner to a JSS Next.js/React component:
In the Sitecore content tree, in sitecore/layout/Renderings, find the Hero Banner rendering.
In the Component Name field, enter the name HeroBanner.Note
The name must be in Pascal case to follow the React/Next.js naming convention for components.
Clear the Render as HTML check box.
Publish your changes.
In a terminal, change the current directory to the root directory of your JSS Next.js application and scaffold a new component by running the following command:RequestResponseshell
jss scaffold HeroBanner
src/components/HeroBanner.tsx, implement the
HeroBannercomponent with a structure matching that of the Razor view.
Where possible, replace REST API calls to Sitecore with requests to GraphQL endpoints using the Edge schema, such as Sitecore Experience Edge for XM or the Edge Preview endpoint provided by Headless Services. As you continue the conversion process, this allows you to remove the dependency on a Sitecore content delivery server and use Edge delivery for production.