---
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/19/sitecore-headless-development/layout-service.html "Layout Service") or [the Sitecore GraphQL Edge schema](https://doc.sitecore.com/xp/en/developers/hd/19/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 replacing the JSS services used by the application to interact with Sitecore APIs. Specifically, you need to change between REST and GraphQL services provided by the [JSS Layout API](https://doc.sitecore.com/xp/en/developers/hd/19/sitecore-headless-development/jss-layout-api.html "JSS Layout API") and the [JSS GraphQL API](https://doc.sitecore.com/xp/en/developers/hd/19/sitecore-headless-development/jss-dictionary-api.html "JSS Dictionary API").

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

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

1. Move or delete `<src>/lib/dictionary-service-factory.ts` and `<src>/lib/layout-service-factory.ts` .
2. Download [`dictionary-service-factory.ts`](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/src/lib/dictionary-service-factory.ts) and [`layout-service-factory.ts`](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/src/lib/layout-service-factory.ts) to `<src>/lib/`.

</details>

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

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

1. Move or delete `<src>/lib/dictionary-service-factory.ts` and `<src>/lib/layout-service-factory.ts`.
2. Download [`dictionary-service-factory.rest.ts`](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/src/lib/dictionary-service-factory.rest.ts) and [`layout-service-factory.rest.ts`](https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/src/lib/layout-service-factory.rest.ts) to `<src>/lib/`.
3. Rename as `dictionary-service-factory.ts` and `layout-service-factory.ts` respectively.

</details>