コンポーネントをMVC (C#/Razor) からNext.js (JavaScript/React) に段階的に変換する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Sitecoreヘッドレス サービスとJSSを使用して既存のMVCアプリケーションをすでに静的に生成している場合は、MVC/RazorコンポーネントからReact/Next.jsコンポーネントへの変換を開始できます。
変換プロセスを開始する前に、JSS、JSS for Next.js 、およびサンプル・アプリケーション、およびNext.js自体について理解しておくことを強くお勧めします。
これらの推奨事項は、Sitecoreヘッドレス サービスと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に変更します。
-
Component Nameフィールドに、名前HeroBannerを入力します。
メモ名前は、コンポーネントのReact/Next.js命名規則に従うためにPascalケースである必要があります。
-
Render as HTMLチェックボックスをオフにします。
-
変更を公開します。
-
ターミナルで、現在のディレクトリをJSS Next.jsアプリケーションのルートディレクトリに変更し、次のコマンドを実行して新しいコンポーネントをスキャフォールディングします。
-
src/components/HeroBanner.tsxでは、Razorビューの構造と一致する構造でHeroBannerコンポーネントを実装します。
-
可能であれば、SitecoreへのREST API呼び出しを、Sitecore Experience Edge for XMやヘッドレス サービスが提供するEdgeプレビュー エンドポイントなどのEdgeスキーマを使用するGraphQLエンドポイントへの要求に置き換えます。変換プロセスを続行すると、Sitecoreコンテンツ配信サーバーへの依存性をなくし、Edge配信を本番環境に使用できるようになります。