Research and discuss localization options for app

[bofstein]

Juliet to start researcher/reading about options, Becky will schedule meeting with team and Marisa to review options

[jupiter007]

The team met with Marisa and static files are ok, but we want to use something like "translation.io" to allow translations to happen and then automate the static file updates. We need to research which libraries and software is available to work with next-intl. Research lingui.

Check if options other than translation.io are free to us. We have an existing translation.io account that is available at: https://translation.io/cdl-uc3/dmptool/en-US

Separately, we have to discuss how we want to manage site-wide messaging in a database.

Update notes here: https://docs.google.com/document/d/140S_zDca3DjaUNion1ktL4jmLUCoWFlg6OGX6UKqWDc/edit?tab=t.0

[jupiter007]

Looks like next-intl recommends using Crowdin for managing translations. Sent Crowdin a message to see if they provide free educational licenses.

Crowdin responded and said that, yes, they have an "open-source license" which can be requested by sending them the following form: https://crowdin.com/page/open-source-project-setup-request. We need to have a registered account and project in Crowdin in order to sende the request.

[jupiter007]

Simple Crowdin test:

1. I configured a basic next-intl set up
2. I did some research on using translation.io with next-intl but it's not straight forward. translation.io wants people to use lingui to connect to translation.io, but lingui does not work with next-intl. If we don't need to have the routing with localization, we could try and use lingui code for translations with translation.io.
3. I created an Crowdin free account.
4. I generated an API Key under the Tools menu.
5. I used that key in a crowdin.yml file I created in the app that specifies source and translation location
6. I set up some scripts towards automating the upload and download of data from Crowdin and tested.
7. Translations placed into the /messages/en-US/en-US.json folder were placed into the `/messages/pt-BR/pt-BR.json" location after running the scripts:

   "crowdin:upload": "crowdin upload sources",
   "crowdin:download": "crowdin download"

   It does seem like Crowdin may provide more options like Github integration and Crownin In-Context: https://next-intl-docs.vercel.app/docs/workflows/localization-management

[jupiter007]

Simple Lingui/ translation.io test:

1. Ran:

   npm install @translation/lingui
   npm install --save-dev @lingui/cli @lingui/macro
   npm install --save-dev @babel/core babel-plugin-macros
   npm install @lingui/react

2. Added these scripts to app

   {
   "scripts": {
   "sync": "lingui extract --overwrite && lingui compile",
   "sync_and_purge": "lingui extract --overwrite --clean && lingui compile"
   }
   }

3. Created a lingui.config.js file with:

   
   import { formatter } from "@lingui/format-json"

export default { // ... other Lingui configurations locales: [ "en", "pt" ], sourceLocale: "en", catalogs: [ { path: "messages/{locale}/messages", include: [ "app", "components" ], exclude: ['node_modules', '.next'] } ], service: { name: "TranslationIO", apiKey: "a6cb86674be34e1b93d655b155f29ff6" }, format: 'po', messageId: 'message' };

4. Followed instructions here to set up layout.tsx: https://translation.io/docs/guide-to-translate-your-lingui-applications

5. Updated `app/account/connections/page.tsx` to include:

import { Trans } from '@lingui/macro';

Connections

6. Ran `npx lingui extract`
7. Ran `npx lingui compile` to compile files into JavaScript modules
8. Logged into translation.io, and I could see the column where I could translate "Connections"
9. However, when I ran the app, I was getting the error "Unsupported Server Component type: undefined" when starting the app. I don't think NextJs is compatible with "translation.io" because it wants to do both client and server rendering.

[jupiter007]

Will try and follow these instructions from "lingui" as a next step: https://lingui.dev/tutorials/react-rsc

[jupiter007]

1. Set up a project called "dmptool" in Crowdin.
2. Requested a free account as an open source project here: https://crowdin.com/page/open-source-project-setup-request
3. The account I created was granted the free license.
4. Did some more simple translations tests.
5. Got auto-translations to work with Crowdin's free "Machine Translation"
6. Requested a demo from Crowdin rep, Dima Yashchyshyn for Github integrations or for "Crowdin's In-Context" (https://next-intl-docs.vercel.app/docs/workflows/localization-management)

[jupiter007]

So, it seems like Crowdin should work for us. I read that it works with NodeJS as well.

For the NextJS app, using next-intl seems to be the best option for us. It integrates well with NextJS apps, and it makes setting up routing with language codes easy. The only inconvenience is that we have to insert keys for translations into all of our components.