コンポーネントを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アプリケーションのルート ディレクトリに変更し、次のコマンドを実行して新しいコンポーネントをスキャフォールディングします。
RequestResponsejss scaffold HeroBanner -
src/components/HeroBanner.tsxでは、Razorビューの構造と一致する構造でHeroBannerコンポーネントを実装します。
-
可能な場合は、SitecoreへのREST API呼び出しを 、Edgeスキーマを使用してエンドポイントGraphQLリクエスト (Sitecore Experience Edge for XMなど) に置き換えますまたは、ヘッドレス サービスによって提供されるEdgeプレビュー エンドポイント。変換プロセスを続行すると、Sitecoreコンテンツ配信サーバーへの依存性をなくし、Edge配信を本番環境に使用できるようになります。