---
title: "Switch between REST and GraphQL in Next.js JSS apps"
slug: "switch-between-rest-and-graphql-in-next-js-jss-apps"
abstract: "Change the services and APIs used by the JSS app to fetch Layout and Dictionary data"
---
# Switch between REST and GraphQL in Next.js JSS apps

JSS Next.js applications can use either the [Sitecore Layout Service REST API](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/layout-service.html "Layout Service") or [the Sitecore GraphQL Edge schema](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/the-experience-edge-schema.html "The Experience Edge schema") to fetch layout and dictionary data.

You can change the data-fetching method after project creation by instructing the application on which JSS services to use when interacting with Sitecore APIs. Specifically, you must change between REST and GraphQL services provided by the [JSS Layout API](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/jss-layout-api.html "JSS Layout API") and the [JSS GraphQL API](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/jss-dictionary-api.html "JSS Dictionary API").

> [!note]
> This procedure requires updating environment variables. For local development, you update the variables in the `.env` file. If deploying on Vercel, you must update the environment variables in the project settings in the Vercel dashboard. For other hosting services, follow the recommendations of that service for providing environment variables for your application.

<details>
<summary><h2>Switch from REST to GraphQL services</h2></summary>

To switch the Next.js sample application from REST to GraphQL:

- In your environment variables, replace the value of the variable `FETCH_WITH` with `GraphQL`.

</details>

<details>
<summary><h2>Switch from GraphQL to REST services</h2></summary>

To switch the Next.js sample application from GraphQL to REST:

1. In your environment variables, replace the value of the variable `FETCH_WITH` with `REST`.
2. If you are using the `nextjs-sxa` addon in your JSS application, in the `/src/lib/layout-service-factory.ts` file make sure the `configurationName` parameter value of the `RestLayoutService` object is `'sxa-jss'`.
3. When using a JSS next JS app without the `nextjs-sxa` addon, the configurationName will default to `jss`. You can customize it via the `LAYOUT_SERVICE_CONFIGURATION_NAME` environment variable if needed.

</details>