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

Current version: 22.x

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/:

      RequestResponse
      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:

      RequestResponse
      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:

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

Do you have some feedback for us?

If you have suggestions for improving this article,