---
title: "Using GraphQL in JSS Next.js apps"
slug: "using-graphql-in-jss-next-js-apps"
abstract: "Overview of using GraphQL in JSS Next.js apps, including how to choose GraphQL for data fetching."
---
# Using GraphQL in JSS Next.js apps

JSS Next.jss apps enable a variety of data fetching options with GraphQL.

> [!important]
> You cannot use GraphQL if your app is running in disconnected mode. Instead, make sure that:
>
> -   Your app's [fetch method](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/switch-between-rest-and-graphql-in-next-js-jss-apps.html "Switch between REST and GraphQL in Next.js JSS apps") is set to `REST`.
>
> -   Your app includes the `nextjs-styleguide` [addon](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/add-ons-for-next-js-applications.html "Add-ons for Next.js applications").

You can configure a new or existing JSS Next.js application to query the Sitecore GraphQL endpoints, instead of using the equivalent REST APIs.

- To create a Next.js application that uses the JSS GraphQL API for fetching layout and dictionary data, choose *GraphQL* when prompted during the app creation process.
- If you created your Next.js JSS app with REST as the data fetching method, you can reconfigure the sample JSS Next.js app to [use GraphQL instead](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/switch-between-rest-and-graphql-in-next-js-jss-apps.html "Switch between REST and GraphQL in Next.js JSS apps").

> [!note]
> In addition to fetching Sitecore data using the JSS GraphQL API, you can query GraphQL endpoints in a similar manner to what you do when developing regular JavaScript applications using [connected GraphQL](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/connected-graphql-in-jss-apps.html "Connected GraphQL in JSS apps"). You can also use connected GraphQL to [run queries at the component level](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/use-graphql-to-fetch-component-level-data-in-jss-next-js-apps.html).

To write type-protected code with rich IDE assists using GraphQL types and TypeScript static data typing, you can [introspect the GraphQL schema](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/introspecting-the-graphql-schema-in-jss-next-js-apps.html "Introspecting the GraphQL schema in JSS Next.js apps").