Preparing the list of pages for static generation or export in JSS Next.js apps

The Next.js JSS app comes with a single dynamic catch-all route. Without some assistance, the application does not know which page you are accessing. To inform the application about the available paths for dynamic routes, the routes must implement and export the GetStaticPaths function.

GetStaticPaths and the sitemap fetcher

The GetStaticPaths function is responsible for identifying which paths/pages to fetch data for and prerender, based on the received data.

The function uses an instance of the SitecoreSitemapFetcher class, defined in the src/lib/sitemap-fetcher.ts file, that gathers the list of available paths for the route, as follows:

  • In disconnected development mode, the SitemapFetcher instance, through an instance of the DisconnectedSitemapService, generates the list of pages using a ManifestInstance.

    The Manifest file is stored in sitecore/manifest/sitecore-import.json and it can be generated by running the JSS CLI command jss manifest or starting the Next.js application with the scripts jss start or jss start:disconnected-proxy. The DisconnectedSitemapService iterates over the manifest routes and generates all the paths for prerendering. You do not have prerendered pages because getStaticPaths runs on every request.

  • In production mode, the SitemapFetcher instance uses an instance of the GraphQLSitemapService to fetch the paths for prerendering.

The GraphQL Sitemap Service

The GraphQL Sitemap Service fetches the list of site paths from XM Cloud GraphQL endpoints. The service is commonly used in conjunction with a GetStaticPaths implementation. Next.js uses the list of paths to fetch data for Static Generation and Export functionality.


In the sample application, in /src/lib/sitemap-fetcher.ts you can inspect and modify the default SitemapFetcher configuration.

The service comes preconfigured with:

  • endpoint - from temp/config.graphQLEndpoint.

  • apiKey - from temp/config.sitecoreApiKey.

  • siteName - from temp/config.jssAppName.

Functions and process

The service exposes the methods fetchSSGSitemap and fetchExportSitemap.

For static export, it uses fetchExportSitemap. Because static export does not support multilingual apps, this function accepts one language and only runs GraphQL queries for that language.

For static generation (SG), it uses fetchSSGSitemap. This function accepts an array of supported languages. It includes the locale property because the sample application enables internationalization by default. It runs a GraphQL query for each language.

When you invoke fetchSSGSitemap/fetchExportSitemap using the GraphQLSitemapService, the service runs the following steps:

  • It fetches items using the provided locale.

  • It merges loaded items in the correct format for SG or static HTML export.


You can replace the default GraphQL query used by the GraphQL Sitemap Service to fetch items and generate the sitemap with a custom query. To do so, extend the GraphQLSitemapService class, overriding the fetchSitemap method used internally by fetchSSGSitemap and fetchExportSitemap.

Do you have some feedback for us?

If you have suggestions for improving this article,