---
title: "Sitecore JavaScriptレンダリングSDK(JSS)Next.js"
slug: "sitecore-javascript-rendering-sdk--jss--for-next-js"
abstract: "React、Angular、Vue.jsのJSSと比較して、Next.js機能と改善点のJSSの概要"
---
# Sitecore JavaScriptレンダリングSDK(JSS)Next.js

[Next.js](https://nextjs.org/)はReactの上に構築されたフレームワークで、開発者が設定やボイラープレートコードの必要性を最小限に抑えて本番環境対応のアプリケーションを作成するのを支援することを目的としています。

JSS for Next.jsは、開発ワークフローと体験を簡素化・向上させるために[Next.jsの多くの機能を](https://nextjs.org/#features)活用しています。

このモジュールはレンダリングSDKの一部として提供されていますSitecore JavaScript。Next.jsコンポーネントとJSSの統合が含まれています。

以下のビデオでは、Next.jsの利点を紹介しています。

:::youtube{id="CfoOKlKjzfA"}

[Master Sitecore「Headless & JSS」プレイリスト全編をYouTubeでご覧いただけます。](https://www.youtube.com/playlist?list=PL1jJVFm_lGnwZup4L4BjITS2sKr4rpMfI)

## 従来のJSS SDKに対する改善点

JSS for Next.jsはJSS for React、Angular、Vue.jsと区別されます。

JSSをNext.jsで使用する主な利点は、他のフレームワーク固有のSDKと比べて以下の通りです:

-   開発および本番のランタイムパリティ、開発中のサーバー側レンダリング(SSR)も含まれます。
-   アプリケーションモードや展開要件の減少。
-   本番環境でのSSRやSitecoreのトラッキング統合 *にはヘッドレスSSRプロキシは必要ありません*。
-   アプリケーションのバンドルをContent Managementインスタンスにデプロイすることなく、高度なSitecoreコンテンツおよびレイアウトエディターとのより簡単な統合が可能です。

## JSSでサポートされているNext.js機能

JSS for Next.jsは以下の機能をサポートしています:

-   Next.jsの静的HTMLエクスポート、インクリメンタル静的サイト生成、サーバー側レンダリング、ハイブリッドレンダリングなどがあります。
-   Next.jsファイルベースのルーターと [Sitecoreレイアウトサービス](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/layout-service.html "Layout Service")を通じて動的に作者定義のURLを生成します。
-   著者が定義したページレイアウトに基づく動的コンポーネントレンダリング。
-   さまざまなSitecoreフィールドタイプのレンダリングのためのヘルパーコンポーネント。
-   [Next.jsプレビューモード](https://nextjs.org/docs/advanced-features/preview-mode)を通じた[高度なSitecoreコンテンツおよびレイアウトエディターとの統合](https://doc.sitecore.com/xp/ja/developers/hd/22/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")。
-   [Sitecoreルートクエリによる静的サイト生成。](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/prerendering-methods-and-data-fetching-strategies-in-jss-next-js-apps.html "Prerendering methods and data fetching strategies in JSS Next.js apps")
-   Next.jsのクライアントサイドルーティングサポートで、Sitecoreのリンクフィールドおよびリッチテキストフィールドに対応しています。
-   Sitecore言語バージョンと[Next.jsによる国際化ルーティング](https://nextjs.org/docs/advanced-features/i18n-routing)[のサポート](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/internationalization-in-the-jss-sample-app-for-next-js.html "Internationalization in the JSS sample app for Next.js")。
-   [Sitecore駆動コンポーネント向けのコンポーネントレベルのデータ取得](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/component-level-data-fetching-in-jss-next-js-apps.html "Component-level data fetching in JSS Next.js apps")。
-   [Sitecore分析とパーソナライズのサポート](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/tracking-and-analytics-integration-in-jss-next-js-apps.html "Tracking and analytics integration in JSS Next.js apps")。この機能は、Next.jsアプリのSSRとSitecoreレイアウトサービスREST APIの利用が必要です。
-   [JSSコードファースト](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/code-first-development-workflow.html "Code-first development workflow")ワークフローおよびモックSitecoreサービスのサポート。
-   TypeScript対応の一般的なユースケースを示すアプリのサンプルです。
-   [Windowsベースの開発者向けのコンテナ化テンプレート](https://doc.sitecore.com/xp/ja/developers/hd/22/sitecore-headless-development/the-sitecore-containers-template-for-jss-next-js-apps.html "The Sitecore Containers template for JSS Next.js apps")。
-   コンポーネントレベルのCSS、コード分割、高速リフレッシュなど、他にも組み込みのNext.js機能があります。
-   [Vercel](https://vercel.com/)のデプロイに対応したアプリ。