Next.js React、Angular、Vue.jsのJSSとの違いについてSitecore JSS

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

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

SitecoreのNext.js SDKは他のSitecore JavaScript SDKと重要な違いがあります。

アーキテクチャと展開

Next.jsはビルド時間および実行時の静的生成(SG)の組み込みオプションを提供しています。

箱から出してみると、Next.js SDKはSGやSitecore Experience Edge for XMでのSitecore追跡やパーソナライズに対応していません。

本番展開時にHeadless SSRプロキシを使う必要はありません。なぜなら、Next.jsはネイティブにサーバーサイドレンダリング(SSR)をサポートしているほか、SGやインクリメンタル静的生成、書き換えの設定、プロキシも対応しているからです。

SSRやSitecoreレイアウトサービスREST APIを使えば、JSS Next.jsアプリでSitecoreの追跡と分析 を統合できます。

Experience EditorやHorizonなどの高度なSitecoreエディターとの統合は別途デプロイ不要で、HTTPレンダリングエンジンのみをサポートします。

Sitecore Content ManagementサーバーにインストールNode.js必要はありません。

アプリケーションをSitecore Content Managementロールにデプロイする必要はありません。

開発

Next.js JSSでJSSアプリケーションを開発する場合、他のフレームワーク固有のSitecore JavaScript SDKに比べて定型コードが少ないです。

Next.jsのサンプルは以下の特徴を持っています。

  • 簡略化されたコンポーネントファイルシステム構造を持っています。
  • Next.jsがTypescriptをサポートしているため、サンプルアプリではデフォルトでTypescriptを使用します。
  • GraphQLスキーマタイプのコード生成も含まれています。
  • コンテナ化されたテンプレートを基に作成可能です。テンプレートはSitecoreファーストのワークフローに最適化されています。

特に、Next.jsでJSSを使う際には以下のことを覚えておいてください。

  • JSS CLIコマンドは jss deploy app や jss deploy filesは使わないでください。
  • コードファーストのアイテムインポートにはjss deploy itemsを使いましょう。
  • package.jsonファイルでsitecoreDistPathを設定する必要はありません。
  • LinkおよびRichTextフィールドヘルパーコンポーネントは、クライアント側ルーティングを標準でサポートしています。
  • .graphqlファイルを追加したり、Sitecoreデータモデル(テンプレート)を変更したりする場合は、GraphQL内省を更新しなければなりません。
  • Next.jsアプリはSitecoreメディアリクエストをプロキシするよう設定されています。したがって、レイアウトサービスはサーバーURLを除外します。
この記事を改善するための提案がある場合は、 お知らせください!