Skip to main content

Customize build-time static paths in JSS Next.js apps

Abstract

Control the static paths returned for statically generated dynamic routes with custom sitemap fetchers.

For large websites with many pages, products, or articles, the static generation of all the pages might take a long time. You can reduce the build time of your statically generated application by excluding some types of pages/items from static generation.

You can achieve this by modifying the GraphQLSitemapService/MultisiteGraphQLSitemapService instance that is initialized and used within the SitecoreSitemapFetcher class.

To customize build-time static paths in a JSS Next.js app:

  • In the rendering application folder, in the src/lib/sitemap-fetcher/plugins/graphql-sitemap-service.ts file, modify the GraphqlSitemapServicePlugin constructor as follows:

    Note

    If using the Next.js Multisite add-on, instead of siteName: config.jssAppName, you provide a list of sites from the site resolver sites: [...new Set(siteResolver.sites.map((site: SiteInfo) => site.name))].

    • To include paths, provide an array of paths to the includedPaths parameter of the GraphQLSitemapService instance. When you specify includedPaths, the query returns only paths matching the provided patterns. For example, to include all paths prefixed with /products/:

      constructor() {
  this._graphqlSitemapService = new GraphQLSitemapService({
    endpoint: config.graphQLEndpoint,
    apiKey: config.sitecoreApiKey,
    siteName: config.jssAppName,
    includedPaths: ["/products/"]     
 });
}

    • To exclude paths, provide an array of paths to the excludedPaths parameter of the GraphQLSitemapService instance. For example, to include the paths prefixed with /products/, except those that are about old phones:

      constructor() {
  this._graphqlSitemapService = new GraphQLSitemapService({
    endpoint: config.graphQLEndpoint,
    apiKey: config.sitecoreApiKey,
    siteName: config.jssAppName,
    includedPaths: ["/products/"],
    excludedPaths: ["/products/old-phones/"]     
 });
}

    • To fetch all but some paths, you can use the excludedPaths parameter only. For example, to exclude all paths for products:

      constructor() {
  this._graphqlSitemapService = new GraphQLSitemapService({
    endpoint: config.graphQLEndpoint,
    apiKey: config.sitecoreApiKey,
    siteName: config.jssAppName,
    exludedPaths: ["/products/"]
 });
}