How JSS Routes to Sitecore with Next.js
Next.js comes with a file-system-based router built on the concept of pages and includes advanced dynamic routing features.
See Next.js documentation to learn more about routing.
One of these routing features is optional catch-all routes, which allows a single route file to catch all paths. This is the [[...path]].tsx
file you'll find under \src\pages
in the Next.js sample application. Sitecore JSS takes advantage of this specific feature to serve up Sitecore page routes with Next.js.
Here's a high-level overview of the routing process.
In the diagram above, you can see how the Next.js route is applied to Sitecore JSS.
- The
[[...path]].tsx
Next.js route will catch any path and pass this information along togetStaticProps
orgetServerSideProps
on thecontext
object (as a tokenized array). - The page props factory uses the path information to construct a normalized Sitecore item path. It then makes a request to the JSS Layout Service to fetch layout data for the item.
i18n Routing
Internationalized (i18n) routing works similarly but introduces an additional locale/language dimension to the routing process.
See Next.js documentation to learn more about internationalized routing.
When you configure i18n for your Next.js application:
- The
context
object will also contain the Next.js routelocale
. - The
locale
is passed to the JSS Layout Service call as asc_lang
parameter.
To transition between locales, you can use Link
or useRouter
. Read more about it here.
You can configure <languageEmbedding>
in Sitecore. It needs to be set to asNeeded
or always
for the language prefix (sub-path route) to be returned from Sitecore internal links. Our <Link />
component handles i18n route transitions for internal links coming from Sitecore.
See here for more information on using Next.js i18n with JSS.