---
title: "JSS Next.jsアプリでGraphQLを使う"
slug: "using-graphql-in-jss-next-js-apps"
abstract: "JSS Next.jsアプリでGraphQLを使用する概要と、データ取得にGraphQLを選択する方法。"
---
# JSS Next.jsアプリでGraphQLを使う

JSS Next.jssアプリは、GraphQLでさまざまなデータ取得オプションを可能にします。

> !重要アプリが切断モードで動作している場合はGraphQLを使用できません。代わりに、以下のことを確認してください:
> 
> -   アプリの [フェッチメソッド](https://doc.sitecore.com/xp/ja/developers/hd/21/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/xp/ja/developers/hd/21/sitecore-headless-development/add-ons-for-next-js-applications.html "Add-ons for Next.js applications")が含まれています。
>     

新規または既存のJSS Next.jsアプリケーションを設定すれば、Sitecore GraphQLエンドポイントにクエリを割り当てることができ、同等のAPIを使わずに済むRESTです。

-   レイアウトや辞書データを取得するためにJSS GraphQL APIを使うNext.jsアプリケーションを作成するには、アプリ作成時に *GraphQL* を選択します。
-   もしNext.js JSSアプリをRESTデータ取得方法にして作成した場合、サンプルJSS Next.jsアプリを [GraphQLに](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/switch-between-rest-and-graphql-in-next-js-jss-apps.html "Switch between REST and GraphQL in Next.js JSS apps")再設定できます。

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

GraphQL型とTypeScriptの静的データ型型付けを用いて、リッチなIDEアシストで型保護コードを書くには、[GraphQLスキーマを内省](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/introspecting-the-graphql-schema-in-jss-next-js-apps.html "Introspecting the GraphQL schema in JSS Next.js apps")することができます。