---
title: "JSS Next.jsアプリでGraphQLを使う"
slug: "using-graphql-in-jss-next-js-apps"
abstract: "JSS Next.jsアプリでのGraphQL使用の概要"
---
# JSS Next.jsアプリでGraphQLを使う

JSS Next.jsアプリでGraphQLを使いたい場合は、エンドポイントへのクエリに対応できるすべてのインフラを整えたままアプリケーションを初期化Sitecore GraphQLできます。

> !重要アプリが切断モードで動作している場合はGraphQLを使用できません。代わりに、以下のことを確認してください:
> 
> -   アプリの [フェッチメソッド](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/switch-between-rest-and-graphql-in-next-js-jss-apps.html "Switch between REST and GraphQL in Next.js JSS apps") はRESTに設定されています。
>     
> -   アプリにはnextjs-styleguide[アドオン](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/add-ons-for-next-js-applications.html)が含まれています。
>     

データ取得にJSS GraphQL APIを使うNext.jsアプリケーションを作成するには、[JSS CLIコマンドjss create](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk-cli-tools-api-reference.html#UUID-ba8bae12-5938-63d2-1ae1-451aec88abe5_UUID-63ee54c7-6c40-bc5a-0db9-0be674e71aa0 "jss create")に\--fetchWithパラメータを付与できます。

例えば、[Next.jsのサンプルアプリケーションを基にコードファーストのJSSアプリを作成する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--creating-a-jss-next-js-application-with-the-jss-cli.html "Walkthrough: Creating a JSS Next.js application with the JSS CLI")場合、次のコマンドを実行します:

jss create my-next-app nextjs --fetchWith GraphQL --prerender SSG|SSR

[Sitecore Next.jsのContainersテンプレートでプロジェクトを作成する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--setting-up-a-development-environment-with-the-sitecore-containers-template-for-next-js.html "Walkthrough: Setting up a development environment with the Sitecore Containers template for Next.js")際に\--fetchWithパラメータを提供するには、以下のコマンドをご利用ください:

dotnet new sitecore.nextjs.gettingstarted -n MyProject --JSSCreateParams "--fetchWith GraphQL --prerender SSG|SSR"

Next.js JSSアプリをデフォルトパラメータで作った場合、サンプルJSS Next.jsアプリを使って[GraphQLに切り替え](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/switch-between-rest-and-graphql-in-next-js-jss-apps.html "Switch between REST and GraphQL in Next.js JSS apps")ることができます。

GraphQL型とTypeScriptの静的データ型型付けを用いて、リッチなIDEアシストで型保護コードを書くには、[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")することができます。

JSS GraphQL APIでSitecoreデータを取得するだけでなく、[接続GraphQL](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/connected-graphql-in-jss-apps.html "Connected GraphQL in JSS apps")を使った通常のJavaScriptアプリケーション開発時と同様に、エンドポイントGraphQLクエリも可能です。接続GraphQLを使って [コンポーネントレベルでGraphQLクエリを実行する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/use-graphql-to-fetch-component-level-data-in-jss-next-js-apps.html "Use GraphQL to fetch component-level data in JSS Next.js apps")こともできます。