Forget about localization for your web applications

No, no, doing localized web applications that are accessible for people around the world is still relevant. But you should forget about doing localization if you are a developer.

As a developer, you know that integrating localization into your application is effortful, no matter whether you use CLI-based localization platforms or just store localization in your repository. You should always remember them, if they are current, if their version is suitable for the application version, if they are processed, and so on.

Let me show you how you can forget about all these issues and focus on development. Here, I will describe a solution based on Next.js. However, it can be easily applied to many other modern frameworks and approaches like React, Vue, Flask, and even backends such as Node.js, Python, and others, and also for using any internationalization libraries.

We won't reinvent the wheel, so let’s take a localized web application sample prepared by the Next.js team: https://github.com/vercel/next.js/tree/canary/examples/with-i18n-rosetta. Just run the following command.

npx create-next-app --example with-i18n-rosetta with-i18n-rosetta-app

Let’s see what we have as a result.

It’s a simple Next.js application configured with the https://github.com/lukeed/rosetta internationalization library. All localization values are stored in JSON files under the /locales folder, with each language in a separate file. Localization is configured in the lib/i18n.js file, where you can find English (en) as the default language and German (de) as an additional language. That’s great!

When we start the application (with the command npm run dev), we can see the next page.

Messages for the English version can be found in locales/en.json file, and for the German version in locales/de.json file.

That works! Great.

Let’s add this repository to GitHub; it is necessary for a few next steps. I have created a new public repository on my GitHub: https://github.com/arseniy-kozlov/with-i18n-rosetta.git, and ran the following commands.

git init
git remote add origin https://github.com/arseniy-kozlov/with-i18n-rosetta.git
git add .
git commit -m “Initial commit”
git push origin master

We are close to our goal – to forget about localization – only a few simple steps left. Let’s create an account on Gitloc.

Create a new team.

And connect our repository. Click Add repository and choose GitHub there.

Then authorize the gitloc-org application on the GitHub consent page.

And confirm on the next step.

Choose the with-i18n-rosetta repository.

And confirm on the next page.

Let’s return to our repository and add a simple gitloc.yaml file to the root of the repository.

config:
  defaultLocale: en
  locales:
    - en
    - de
  directories:
    - locales

That’s it! Right now, forget about doing localizations and focus on development. Let’s do it together.

Let’s update our messages in locales/en.json file.

I have removed the text key, modified the description value, and added a new title key. Then let’s make corresponding changes in the pages/[lng]/index.js file.

Then let’s commit changes and push them to the remote repository.

git add .
git commit -m ‘gitloc.org test’
git push origin master

After that, Gitloc detects our changes, automatically translates them, and commits them to the repository. It takes only a few seconds, and you can pull translations to your local repository.

Let’s run our application and check the changes.

npm run dev

Good job!

Learn more about Gitloc - https://gitloc.org/

We will be very grateful for all your feedback. I hope you enjoy!