Convert components from MVC (C#/Razor) to Next.js (JavaScript/React) incrementally
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.
We strongly recommend you become familiar with JSS, JSS for Next.js and the sample application, and Next.js itself before beginning the conversion process.
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.
-
Change the template of the rendering to /sitecore/templates/Foundation/JavaScript Services/Json Rendering.
-
In the Component Name field, enter the name HeroBanner.
NoteThe 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:
RequestResponsejss scaffold HeroBanner -
In
src/components/HeroBanner.tsx, implement theHeroBannercomponent 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.