getStaticPaths and the Sitemap Service
Next.js provides the ability to generate pages with dynamic routes.
If a page has dynamic routes and uses getStaticProps, you can define a list of paths that you want pre-render to HTML at build time.
Before using getStaticPaths read more about the fallback
key.
getStaticPaths
Our Next.js sample provides a simple way to handle getStaticPaths
in different modes.
See the src/pages/[[...path]].tsx
file contains the exported getStaticPaths
function.
- In
development
mode, you will not have pre-rendered pages becausegetStaticPaths
runs on every request. - In
production
mode,getStaticPaths
will usesitemapFetcher
to fetch the paths for pre-rendering. See thesitemapFetcher
implementation insrc/lib/sitemap-fetcher.ts
.
GraphQLSitemapService
This service generates the sitemap
using the config.graphqlEndpoint
endpoint.
It exposes fetchSSGSitemap
and fetchExportSitemap
.
For static export,
fetchExportSitemap
. As static export doesn't support multilingual apps, this function accepts onelanguage
and will only run GraphQL queries for that language.In SSG mode, use
fetchSSGSitemap
. This function accepts an array of supportedlanguages
. It will include thelocale
property because the sample application enables i18n by default. It will run GraphQL query for each language.
You can customize the default search query used to fetch items and generate the sitemap.
The default search query is:
query {
search(
where: {
AND:[
{
name:"_path",
value:"${rootItemId.toLowerCase()}" # provided root item id
},
{
name:"_language",
value:"${locale}" # provided language
},
{
name:"_hasLayout",
value :"true"
}
]
}
) {
results {
url {
path
}
}
}
}
It is not always desirable to pre-render all the pages. If you have many pages and you wish to customize the search query, use the formatSearchQuery
argument. Map language
and rootItemId
on the new search query.
The following example shows a query that retrieves only the first 10 items:
const formatSearchQuery = (rootItemId: string, locale: string) =>
`search(
first: 10,
where: {
AND:[
{
name:"_path",
value:"${rootItemId}"
},
{
name:"_language",
value:"${locale}"
},
{
name:"_hasLayout",
value :"true"
}
]
}
)`;
this._graphqlSitemapService.fetchSSGSitemap(
context?.locales || [],
this.GRAPHQL_ROOT_ITEM_PATH,
formatSearchQuery
);
When you execute fetchSSGSitemap
/fetchExportSitemap
using the GraphQLSitemapService
, the service executes the following steps:
- Fetch the
rootItemId
using the providedrootItemPath
. - Fetch items using
rootItemId
and the providedlocale
. - Merge loaded items in the correct format for SSG or static HTML export.
Remember to update the value of the
GRAPHQL_ROOT_ITEM_PATH
if you changed the location of your root item.
Static HTML Export
If you use Static HTML Export you should define the environment variable EXPORT_MODE=true
.
Disconnected mode
If you run export
in disconnected
mode, sitemapFetcher
will use the DisconnectedSitemapService
which accepts a ManifestInstance
. The sample application uses sitecore/manifest/sitecore-import.json
. You can generate by running jss manifest
or jss start:disconnected-proxy
. DisconnectedSitemapService
will go through the manifest routes and generate all paths for pre-rendering.
Connected mode
If you run export
in connected
mode, sitemapFetcher
will use the GraphQLSitemapService
.