---
title: "Next.js React、Angular、Vue.jsのJSSとの違いについてSitecore JSS"
slug: "sitecore-jss-for-next-js-differences-from-jss-for-react-angular-and-vue-js"
abstract: "Next.jsのJSSはReact、Angular、Vue.jsのJSSと異なります"
---
# Next.js React、Angular、Vue.jsのJSSとの違いについてSitecore JSS

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

## アーキテクチャと展開

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

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

[本番展開](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/deployment-options-for-jss-next-js-apps.html "Deployment options for JSS Next.js apps")時にHeadless SSRプロキシを使う必要はありません。なぜなら、Next.jsはネイティブにサーバーサイドレンダリング(SSR)をサポートしているほか、SGやインクリメンタル静的生成、書き換えの設定、[プロキシも](https://nextjs.org/docs/api-reference/next.config.js/rewrites#rewriting-to-an-external-url)対応しているからです。

SSRやSitecoreレイアウトサービスREST APIを使えば、[JSS Next.jsアプリでSitecoreの追跡と分析](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/tracking-and-analytics-integration-in-jss-next-js-apps.html "Tracking and analytics integration in JSS Next.js apps") を統合できます。

[Experience EditorやHorizonなどの高度なSitecoreエディターとの統合](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/architecture-and-apis-for-integrating-jss-next-js-apps-with-sitecore-editors.html "Architecture and APIs for integrating JSS Next.js apps with Sitecore editors")[は別途デプロイ不要で、HTTPレンダリングエンジンのみをサポートします。](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/http-rendering-engine.html "HTTP rendering engine")

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

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

## 開発

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

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

-   簡略化されたコンポーネントファイルシステム構造を持っています。
-   Next.jsがTypescriptをサポートしているため、サンプルアプリではデフォルトでTypescriptを使用します。
-   GraphQLスキーマタイプのコード生成も含まれています。
-   [コンテナ化されたテンプレート](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/the-sitecore-containers-template-for-jss-next-js-apps.html "The Sitecore Containers template for JSS Next.js apps")を基に作成可能です。テンプレートは[Sitecoreファーストのワークフロー](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-first-development-workflow.html "Sitecore-first development workflow")に最適化されています。

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

-   JSS CLIコマンドは jss deploy app や jss deploy filesは使わないでください。
-   [コードファーストのアイテムインポート](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/code-first-development-workflow.html "Code-first development workflow")にはjss deploy itemsを使いましょう。
-   package.jsonファイルでsitecoreDistPathを設定する必要はありません。
-   LinkおよびRichTextフィールドヘルパーコンポーネントは、クライアント側ルーティングを標準でサポートしています。
-   .graphqlファイルを追加したり、Sitecoreデータモデル(テンプレート)を変更したりする場合は、[GraphQL内省](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/introspecting-the-graphql-schema-in-jss-next-js-apps.html "Introspecting the GraphQL schema in JSS Next.js apps")を更新しなければなりません。
-   Next.jsアプリはSitecoreメディアリクエストをプロキシするよう設定されています。したがって、レイアウトサービスはサーバーURLを除外します。