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 function GetStaticPaths
is responsible for identifying which paths/pages to fetch data for and pre-render based on the received data.
The function uses an instance of the SitecoreSitemapFetcher
class, defined in the file src/lib/sitemap-fetcher.ts
, that gathers the list of available paths for the route, as follows:
-
In disconnected development mode, the
SitemapFetcher
instance, through an instance of theDisconnectedSitemapService
, generates the list of pages using aManifestInstance
.The Manifest file is stored in
sitecore/manifest/sitecore-import.json
and it can be generated by running the JSS CLI commandjss manifest
or starting the Next.js application with the scriptsjss start
orjss start:disconnected-proxy
. TheDisconnectedSitemapService
iterates over the manifest routes and generate all the paths for pre-rendering. You do not have pre-rendered pages becausegetStaticPaths
runs on every request. -
In production mode, the
SitemapFetcher
instance uses an instance of theGraphQLSitemapService
to fetch the paths for pre-rendering.
The GraphQL Sitemap Service
The GraphQL Sitemap Service fetches the list of site paths from Sitecore 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.
Configuration
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
- fromtemp/config.graphQLEndpoint
, -
apiKey
- fromtemp/config.sitecoreApiKey
, -
siteName
- fromtemp/config.jssAppName
.
You also have the possibility to specify the rootItemId
. Because you can have multiple sites/applications in a Sitecore instance, the service needs a root item ID to fetch the list of pages for the current app. If you do not specify the rootItemId
, the service attempts to discover it for the current JSS app using GraphQL and the app name.
For performance considerations, we strongly recommend you specify a rootItemId
to avoid an additional GraphQL lookup.
Not specifying the rootItemId
for the GraphQL Sitemap Service instance can cause errors when using JSS for Next.js with SXA integration.
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 the
rootItemId
using the providedrootItemPath
. -
It fetches items using the
rootItemId
and the providedlocale
. -
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
.