MVC(C#/Razor)からNext.js(JavaScript/React)へのコンポーネントを段階的に変換します
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
すでにSitecoreヘッドレスサービスやJSSを使って既存のMVCアプリケーションを静的に生成しているなら、MVC/RazorコンポーネントをReact/Next.jsコンポーネントに変換し始めることができます。
!重要変換プロセスを始める前に、JSS、JSS for Next.jsおよびサンプルアプリケーション、そしてNext.js自体に慣れておくことを強くお勧めします。
これらの推奨は、すでにSitecore Headless ServicesとJSSを使って静的生成のためにMVCおよびJSSアプリケーションを設定していることを前提としています。
変換プロセスはトップダウンでなければならず、まず最も外側の部品を変換し、次の図のように順に進めていきます。
この過程を説明するために、この例では架空のレンダリングであるHero Bannerを使用します。
!重要既存のMVCコンポーネントが追加のプレースホルダーを公開している場合は、子コンポーネントがレイアウトサービスでレンダリングされるように、そのコンポーネントのレイアウトサービスのプレースホルダーも設定する必要があります。
MVC成分Hero BannerをJSS Next.js/React成分に変換するには:
-
Sitecoreコンテンツツリーのsitecore/layout/Renderingsで、Hero Bannerレンダリングを見つけてください。
-
レンダリングのテンプレートを /sitecore/templates/Foundation/JavaScript Services/Json Renderingに変更してください。
-
コンポーネント名フィールドに名前HeroBannerを入力します。
!注部品のReact/Next.js命名規則に従うために、名前はパスカルケースでなければなりません。
-
**「HTMLとしてレンダリング」**のチェックボックスをクリアしてください。
-
変更点を公開してください。
-
ターミナルで、現在のディレクトリをJSS Next.jsアプリケーションのルートディレクトリに変更し、次のコマンドを実行して新しいコンポーネントをスキャフォールドします。
jss scaffold HeroBanner
-
src/components/HeroBanner.tsxでは、Razorビューの構造に一致した構造でHeroBannerコンポーネントを実装します。
-
可能な限り、Sitecoreの呼び出しREST API、Headless Servicesが提供するSitecore Experience Edge for XMやEdge Previewエンドポイントなど、エッジスキーマを使ったGraphQLエンドポイントへのリクエストに置き換えてください。変換プロセスを進めると、Sitecoreコンテンツ配信サーバーへの依存を排除し、Edgeの配信を本番環境に利用できるようになります。