---
title: "Preparing the list of pages for static generation in JSS Next.js apps"
slug: "preparing-the-list-of-pages-for-static-generation-in-jss-next-js-apps"
abstract: "Description of the JSS Next.js GetStaticPaths, the sitemap fetcher, and the GraphQL Sitemap Service"
---
# Preparing the list of pages for static generation in JSS Next.js apps

The Next.js JSS app has 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](https://nextjs.org/docs/routing/dynamic-routes), the routes must implement and export the `GetStaticPaths` function.

<details>
<summary><h2>GetStaticPaths and the sitemap fetcher</h2></summary>

The function `GetStaticPaths` 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. The `SitemapFetcher` instance uses an instance of `GraphQLSitemapService` or `MultisiteGraphQLSitemapService` to fetch the paths for prerendering.

</details>

<details>
<summary><h2>The GraphQL sitemap services</h2></summary>

The sitemap fetcher can use one of the two available GraphQL sitemap services:

- The `MultisiteGraphQLSitemapService` (if the app has the Next.js Multisite add-on).
- The `GraphQLSitemapService` (without the Next.js Multisite add-on).

The sitemap services fetch the list of site paths from SitecoreAI GraphQL endpoints for one or multiple sites (if using the Next.js Multisite add-on). The services are commonly used in conjunction with a `GetStaticPaths` implementation. Next.js uses the list of paths to fetch data for Static Generation and Export functionality.

### Configuration

In the sample application, in `/src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts` you can inspect and modify the default `SitecoreSitemapFetcher` configuration.

The service comes preconfigured with:

- The GraphQL client factory, which allows you to simplify configuration by using the [Context ID](https://doc.sitecore.com/xmc/en/developers/xm-cloud/en/context-id-environment-variables.html).
- When using the Multisite add-on, a `sites` list from the Multisite site resolver plugin. Otherwise `siteName` - from `temp/config.sitecoreSiteName`.

### Functions and process

Both sitemap services extend the `BaseGraphQLSitemapService` class, exposing the methods `fetchSSGSitemap` and `fetchExportSitemap`.

For static export, the base service 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`, 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.

### Queries

You can replace the [default GraphQL query used by the GraphQL Sitemap Service to fetch items and generate the sitemap](https://github.com/Sitecore/jss/blob/master/packages/sitecore-jss-nextjs/src/services/graphql-sitemap-service.ts#L18-L49) with a custom query. To do so, extend the `GraphQLSitemapService` class, overriding the `fetchSitemap` method used internally by `fetchSSGSitemap` and `fetchExportSitemap`.

</details>