---
title: "Convert components from MVC (C#/Razor) to Next.js (JavaScript/React) incrementally"
slug: "convert-components-from-mvc--c--razor--to-next-js--javascript-react--incrementally"
abstract: "Convert components of statically generated MVC apps to JSS Next.js/React components"
---
# 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.

> [!important]
> We strongly recommend you become familiar with [JSS](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/sitecore-javascript-services-sdk--jss-.html "Sitecore JavaScript Services SDK (JSS)"), [JSS for Next.js](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html "Sitecore JavaScript Rendering SDK (JSS) for Next.js") and the sample application, and [Next.js](https://nextjs.org/docs/) 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](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/walkthrough--statically-generating-an-mvc-application.html "Walkthrough: Statically generating an MVC application").

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:

![top-down-incremental-conversion.svg](https://doc.sitecore.com/api/markdown-image/xp/en/developers/hd/23/sitecore-headless-development/images/top-down-incremental-conversion.svg)

To illustrate the process, in this example, we use a fictional rendering named *Hero Banner*.

> [!important]
> 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:

1. In the Sitecore content tree, in *sitecore/layout/Renderings*, find the *Hero Banner* rendering.
2. Change the template of the rendering to */sitecore/templates/Foundation/JavaScript Services/Json Rendering*.
3. 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.

4. Clear the **Render as HTML** check box.
5. Publish your changes.
6. 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:

    ```shell
    jss scaffold HeroBanner
    ```

7. In `src/components/HeroBanner.tsx` , implement the `HeroBanner` component with a structure matching that of the Razor view.
8. Where possible, replace REST API calls to Sitecore with requests to GraphQL endpoints using [the Edge schema](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/the-experience-edge-schema.html "The Experience 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.