Supporting multilingual applications in JSS
JSS allows you to take advantage of the content language versioning feature of XM Cloud.
There are typically two factors with rendering translated data from XM Cloud:
-
The primary page content.
-
Dictionary items used for translation of labels, button text, and so on.
The sample apps demonstrate one approach for making your app fully translatable using the tools provided by JSS.
Rendering translated page content
When getting content from XM Cloud, the request is made behind the scenes to the Sitecore Layout service.
The Layout service respects the Sitecore language context when fetching route and context data, meaning that requests to the Layout service can utilize the sc_lang parameter to request content in a specific language. For example, http://JssReactWeb/sitecore/api/layout/render/jss?item=/Services&sc_lang=es-MX&sc_apikey={API_KEY}.
You can choose how you invoke the Layout Service and handle language changes.
If you set up your JSS project using a sample application, your app is already configured to handle the fetching of layout data.
Acquiring dictionary phrases
JSS provides a Dictionary API to help you acquire translated phrases in a JSS app.
If you set up your JSS project using a sample application, your app is already configured to handle the fetching of dictionary phrases.
Language routing
JSS does not dictate your route and URL structure. JSS sample applications implement basic routing that follows the XM Cloud route item hierarchy by default.
If your use cases require it, you can modify the default routing system, but remember that it's much simpler for XM Cloud content authors to edit the content for the application when the URL structure for the JSS application follows the same route item structure as XM Cloud.
JSS sample apps demonstrate routing using language prefixes and can handle route formats such as /about, /en/about , or /es-US/about.