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, the routes must implement and export the GetStaticPaths function.
GetStaticPaths and the sitemap fetcher
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.
The GraphQL sitemap services
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.
-
When using the Multisite add-on, a
siteslist from the Multisite site resolver plugin. OtherwisesiteName- fromtemp/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 with a custom query. To do so, extend the GraphQLSitemapService class, overriding the fetchSitemap method used internally by fetchSSGSitemap and fetchExportSitemap.