---
title: "Next.js JSSアプリでRESTとGraphQLを切り替えましょう"
slug: "switch-between-rest-and-graphql-in-next-js-jss-apps"
abstract: "JSSアプリでレイアウトデータや辞書データを取得するために使用するサービスやAPIを変更する"
---
# Next.js JSSアプリでRESTとGraphQLを切り替えましょう

JSS Next.jsアプリケーションは、レイアウトや辞書データを取得するために[SitecoreレイアウトサービスREST API](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/layout-service.html "Layout Service")または[Sitecore GraphQLエッジスキーマ](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/the-experience-edge-schema.html "The Experience Edge schema") のいずれかを使用できます。

プロジェクト作成後に、APIとやり取りする際にどのJSSサービスを使うかをアプリケーションに指示することで、データ取得方法Sitecore変更できます。具体的には、[JSSレイアウトAPI](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/jss-layout-api.html "JSS Layout API")と[JSS GraphQL API](https://doc.sitecore.com/xp/ja/developers/hd/21/sitecore-headless-development/jss-dictionary-api.html "JSS Dictionary API")が提供するRESTサービスとGraphQLサービスの間で切り替える必要があります。

> !注この手順では環境変数の更新が必要です。ローカル開発の場合は、.envファイルの変数を更新します。Vercel上でデプロイする場合は、Vercelダッシュボードのプロジェクト設定で環境変数を更新する必要があります。他のホスティングサービスについては、そのサービスの推奨に従ってアプリケーション用の環境変数を提供します。

## RESTサービスからGraphQLサービスへの切り替え

Next.jsのサンプルアプリケーションをRESTからGraphQLに切り替えるには:

-   環境変数の変数を変数 FETCH\_WITH に置き換え GraphQL。

## GraphQLからRESTサービスへの切り替え

Next.jsのサンプルアプリケーションをGraphQLからRESTに切り替えるには:

1.  環境変数の変数を変数 FETCH\_WITH に置き換え REST。
2.  JSSアプリケーションでnextjs-sxaアドオンを使用している場合、/src/lib/layout-service-factory.tsファイルでRestLayoutServiceオブジェクトのconfigurationNameパラメータ値が'sxa-jss'であることを確認してください。
3.  nextjs-sxaアドオンなしでJSS Next JSアプリを使う場合、configurationNameはデフォルトでjssになります。必要に応じてLAYOUT\_SERVICE\_CONFIGURATION\_NAME環境変数でカスタマイズできます。