JSSを使用したMVCアプリの静的生成に関する制限事項と回避策

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

既存のMVCアプリケーションをヘッドレスJSSアプリケーションに変換するプロセスには、いくつかの制限があります。

Next.jsアプリケーションのエクスポート

Next.js with next exportによって提供される静的エクスポート機能の使用に適用されるすべての制限が適用されます。

next exportは多言語アプリをサポートしていないため、languageEmbeddingを無効にする必要があります。

languageEmbeddingを無効にするには:

Sitecore設定を変更し、languageEmbeddingの値をneverに設定します。

<configuration>    
  <sitecore>          
    <links>        
      <urlBuilder>                    
        <languageEmbedding>never</languageEmbedding>        
      </urlBuilder>           
    </links>    
  </sitecore>
<configuration>

さらに、画像をレンダリングするMVCコンポーネントがある場合は、Sitecoreサーバー上のメディアファイルへのフルパスを指定する必要があります。

メモ

Sitecore Experience Edgeは、メディアファイルのCDNを提供し、画像のサーバー URLを既に埋め込んでいます。

メディアソースURLにサーバーURLを含めるには:

Media.AlwaysIncludeServerUrlのSitecore構成を変更します。
<setting name="Media.AlwaysIncludeServerUrl" set:value="true" />

Sitecore Analyticsとパーソナライゼーション

JSSアプリでのSitecore分析とパーソナライゼーションに関するすべての制限が適用されます。

セッションベースの機能

アカウントログイン、カート情報、GDPRコンプライアンスなど、サーバー側のセッション情報(ASP.NETまたはCookie)に依存する機能は、Next.js静的生成では使用できません。

セッションベースの機能を使用するには、次のいずれかを行う必要があります。

Next.jsのサーバー側レンダリングルートを使用します。このアプローチは、Experience Edgeでは機能しません。
Next.jsの書き換えを使用して、インクリメンタル戦略としてSitecore CDへの完全なパススルーを可能にします。たとえば、サイトのアカウントセクション全体を延期できます。
{ source: '/account/:path*', destination: `${jssConfig.sitecoreApiHost}/account/:path*`, }
クライアント側のアプローチを使用するようにアプリケーションをリファクタリングします。これは、ヘッダーの条件付きLogin/LogoutやGDPRコンプライアンスの受け入れなど、サイトのすべてのページに表示されるコンポーネントに適したアプローチである可能性があります。

Sitecoreフォーム

既存のMVCフォームをJSSアプリケーションで機能させるには、MVCフォームラッパーがHTMLとしてレンダリングされ、Next.jsアプリケーションがフォームに必要なリダイレクトを持つように、いくつかの調整を行う必要があります。

大事な

Sitecore Formsは、RESTレイアウトサービスとサーバー側のレンダリングを使用している場合にのみNext.jsで動作します。

MVCフォームラッパーをHTMLとしてレンダリングするには:

MVCフォームラッパーの場合は、HTMLを出力するようにSitecoreレイアウトサービスを設定します。

フォーム固有のリダイレクトを設定するには:

Next.js JSSアプリのnext.config.jsファイルのredirectsセクションに、次のルールを追加します。

// Sitecore forms
{
  source: '/sitecore%20modules/:path*',
  destination: `${jssConfig.sitecoreApiHost}/sitecore%20modules/:path*`,
},
{
  source: '/formbuilder',
  destination: `${jssConfig.sitecoreApiHost}/formbuilder`,
},

先端

Next.jsアプリケーションにフォームを実装することを検討してください。

この記事を改善するための提案がある場合は、お知らせください!