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.
[[...path]].tsxNext.js route will catch any path and pass this information along to
contextobject (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.
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:
contextobject will also contain the Next.js route
localeis passed to the JSS Layout Service call as a
To transition between locales, you can use
useRouter. Read more about it here.
You can configure
<languageEmbedding> in Sitecore. It needs to be set to
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.