&w=3840&q=75)
Translation is that which transforms everything so that nothing changes. -Günter Grass
Struggling to make your digital product global? We've got you covered!
Introduction
Software companies and developers nowadays are aiming at the exact same goal, Which is to make their apps, website and software stand out and be used by millions of users!
UX (USER EXPERIENCE) is a big factor to achieve that goal, such as languages and well-matched translation. With that being said, Today we will introduce to you Locize as a perfect way to make your digital products worldwide and vibrant!
Visit Locize.com and create a user account
Add a new project:
Creating Json File
We should create a default namespace on Locize and instead of creating multiple ones we will create our namespace in the JSON file.
The JSON file will translate to 'landingpage.title', 'landingpage.subtitle' objects, the paragraph key with the array is something to keep in mind.
Locize will translate it to 'landingpage.paragraph.0' for the element in the array when importing the JSON file inside the locize app.
We could also create it using the locize frontend, but consider creating your namespace by separating the translation variable key with periods. Like the locize translation of the JSON file, landingpage.title.
Add Translation Object
Under the Focus tab, make sure the version (latest), source language (sv-SE) and namespace (default) is selected. Click the add button and add your first translation object or you could import a JSON file.
❗ hit the save button
Add Other Languages
After the source language translation keys and values are all in place you can start adding other languages:
ControlCenter → settings → languages
Add Translation
Next, go back to the focus tab and instead of picking our source language at the top, we can pick the new language that we just added.
You can still see all the keys that we added to our source language. Click on one of them and you will see the source language text and an empty box where you can type the translation.
❗ hit the save button
Implement to Your React/Next.js Project
Run the following commands to install the required libraries!
Start by Creating locizeBackendOptions Object
projectId & apiKey:
You have your project id on the controlCenter page:
Settings ⇒ API Keys ⇒ (projectId, apiKey)
ReferenceLng: Should be the source language, in this example, it would be sv-SE
initialize i18next with Locize, react-i18next and LanguageDetector
You should have a default namespace created in the ControlCenter, for both ns and deafaultNS let's stick to one 'default'.
after initializing use change language and select the source language. LanguageDetector should hopefully fix that for us in some way or another but for now... this works
Use the translation you have created on Locize in your app
Conclusion
That's it for Locize blog post, make sure to try it and benefit from its huge value in order to boost up your user experience. Any questions or suggestions get in touch by email or Instagram DMs.
Enjoyed this article? Consider sharing it.