Switch between REST and GraphQL in Next.js JSS apps

Current version: 22.x

JSS Next.js applications can use either the Sitecore Layout Service REST API or the Sitecore GraphQL 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 and the JSS GraphQL 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.

Switch from REST to GraphQL services

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.

Switch from GraphQL to REST services

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'.

Do you have some feedback for us?

If you have suggestions for improving this article,