---
title: "MVC(C#/Razor)からNext.js(JavaScript/React)へのコンポーネントを段階的に変換します"
slug: "convert-components-from-mvc--c--razor--to-next-js--javascript-react--incrementally"
abstract: "静的に生成されたMVCアプリのコンポーネントをJSS Next.js/Reactコンポーネントに変換します"
---
# MVC(C#/Razor)からNext.js(JavaScript/React)へのコンポーネントを段階的に変換します

すでにSitecoreヘッドレスサービスやJSSを使って既存のMVCアプリケーションを静的に生成しているなら、MVC/RazorコンポーネントをReact/Next.jsコンポーネントに変換し始めることができます。

> !重要変換プロセスを始める前に、[JSS](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-services-sdk--jss-.html "Sitecore JavaScript Services SDK (JSS)")、[JSS for Next.js](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html "Sitecore JavaScript Rendering SDK (JSS) for Next.js")およびサンプルアプリケーション、そして[Next.js](https://nextjs.org/docs/)自体に慣れておくことを強くお勧めします。
> 
> これらの推奨は、すでに[Sitecore Headless ServicesとJSSを使って静的生成](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--statically-generating-an-mvc-application.html "Walkthrough: Statically generating an MVC application")のためにMVCおよびJSSアプリケーションを設定していることを前提としています。

変換プロセスはトップダウンでなければならず、まず最も外側の部品を変換し、次の図のように順に進めていきます。

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

この過程を説明するために、この例では架空のレンダリングである*Hero Banner*を使用します。

> !重要既存のMVCコンポーネントが追加のプレースホルダーを公開している場合は、子コンポーネントがレイアウトサービスでレンダリングされるように、そのコンポーネントのレイアウトサービスのプレースホルダーも設定する必要があります。

MVC成分*Hero Banner*をJSS Next.js/React成分に変換するには:

1.  Sitecoreコンテンツツリーの*sitecore/layout/Renderings*で、*Hero Banner*レンダリングを見つけてください。
    
2.  レンダリングのテンプレートを */sitecore/templates/Foundation/JavaScript Services/Json Rendering*に変更してください。
    
3.  **コンポーネント名**フィールドに名前*HeroBanner*を入力します。
    
    > !注部品のReact/Next.js命名規則に従うために、名前はパスカルケースでなければなりません。
    
4.  **「HTMLとしてレンダリング」**のチェックボックスをクリアしてください。
    
5.  変更点を公開してください。
    
6.  ターミナルで、現在のディレクトリをJSS Next.jsアプリケーションのルートディレクトリに変更し、次のコマンドを実行して新しいコンポーネントをスキャフォールドします。
    
    jss scaffold HeroBanner
    
7.  src/components/HeroBanner.tsxでは、Razorビューの構造に一致した構造でHeroBannerコンポーネントを実装します。
    
8.  可能な限り、Sitecoreの呼び出しREST API、Headless Servicesが提供するSitecore Experience Edge for XMやEdge Previewエンドポイントなど、[エッジスキーマ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/the-experience-edge-schema.html "The Experience Edge schema")を使ったGraphQLエンドポイントへのリクエストに置き換えてください。変換プロセスを進めると、Sitecoreコンテンツ配信サーバーへの依存を排除し、Edgeの配信を本番環境に利用できるようになります。