Forget about localization for your web applications
Tags: webdev, architecture, localization, nextjs
Published: 2023-11-06 08:49:31

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.

![Repository structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46mk0974ldszzjocp546.png)

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.

![English index page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3ew6u1cn59822nlh5n1.png)

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

![Localization files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g70nisdr5dpn6e64oy2z.png)

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](https://app.gitloc.org/sign-up).

![Gitloc Sign Up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybwcfo2fcf09dhlpwuyk.png)

Create a new team.

![Create a new team](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ohcq5ljm7czhfsu1xkj.png)

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

![Add repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8llg6dblef2e1sphvxdu.png)

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

![Authorize gitloc-org application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/011g3x1wn7ph5lspdf73.png)

And confirm on the next step.

![Confirm authorization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ebbwq7umqir9e4emy1q.png)

Choose the `with-i18n-rosetta` repository.

![Choose the repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmz9f0a6ehvwbmrjy22h.png)

And confirm on the next page.

![Repository confirmation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63dajrdul7v85my64wxi.png)

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

![gitloc.yaml](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efxzw2wpcfdsaenxem35.png)
```yaml
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.

![English changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63cjjqgmwmg47mi0m7z5.png)

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.

![Index page changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gffvxtv0wen7gzc3ca2e.png)

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.

![Pulling changes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6uhmdviwr3phlfimtqd.png)

Let’s run our application and check the changes.

```
npm run dev
```

![English version page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy0ebhhvbc24cdwb6atr.png)

![German version page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuoqb79ibh6yqvisukk3.png)

Good job!

---

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

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