Internationalized routing in JSS Next.js apps

Version: 22.x

Internationalized (i18n) routing works similarly to regular page routing in JSS Next.js apps but introduces an additional locale/language dimension to the routing process.

Next.js has built-in support for i18n routing. When you configure i18n in your JSS Next.js application:

  • The context object contains the Next.js route locale.

  • The Layout Service receives the locale through the sc_lang parameter.

To transition between locales, you use the Link component from the next/link module or the next/routermodule.

You can configure the <languageEmbedding> setting in Sitecore. The setting must be set to asNeeded or always to return the language prefix (sub-path route) from Sitecore internal links. The Link component provided by JSS for Next.js handles i18n route transitions for internal links coming from Sitecore.

JSS Next.js applications created based on the Next.js JSS sample app use sub-path routing by default. While Next.js supports domain routing, using this strategy in JSS Next.js apps requires custom implementation.

Important

The static HTML export process (using next/export or the JSS CLI command jss export) does not support multilingual apps. To export your application as static HTML files you must disable localization.

Do you have some feedback for us?

If you have suggestions for improving this article,