Best way to translate nextron?

[sustainjane98]

Hey everyone, I am searching for a good way to translate nextron, but cannot find a traditional way. Seems like both next-i18next and react-i18next have problems in th e environment.

Are there any other solutions to this?

[alexis-piquet]

Hi, I would like to suggest to you the usage of "@formatjs/intl".

[alexis-piquet]

I will try to explain to you how you can implement it easily.

Lets start !!!

1. Install @formatjs/intl npm i @formatjs/intl --save

2. Create a new folder named "share" like the following screenshot (in this folder I declare all of my shared files, interfaces, types, functions, sitemap...)
   

3. Create a new file in the "share" folder an name it "locale.ts"

export const LOCALE_EN = 'en'
export const LOCALE_FR = 'fr'

export const LOCALES = <const>[
  LOCALE_FR,
  LOCALE_EN,
]

4. Create a new folder named "translations" and create two files inside named "fr.ts" and "en.ts" (for the exemple ;p)

fr.ts

export default {
  'spaceship': 'Vaisseau spatial',
}

en.ts

export default {
  'spaceship': 'Spaceship',
}

5. Create a new file in the "share" folder an name it "intl.ts"

import { createIntl, createIntlCache  } from '@formatjs/intl'
import { LOCALE_EN, LOCALE_FR } from './locale'
import messages_en from './translations/en'
import messages_fr from './translations/fr'

const cache = createIntlCache()

export default {
  en as string: createIntl({ locale: LOCALE_EN, messages: messages_en }, cache),
  fr as string: createIntl({ locale: LOCALE_FR, messages: messages_fr }, cache),
}

6. Create a new folder named "hooks" and create a new file in this folder named "intl.ts"

import { useMemo } from 'react'
import { NextRouter } from 'next/dist/client/router'
import { IntlShape } from '@formatjs/intl'
import intl from '../intl'
import { LOCALE_EN } from '../locale'

export function useIntl (router: NextRouter): IntlShape<string> {
  return useMemo(() => intl[router?.locale ?? LOCALE_EN], [ router?.locale ])
}

Congrats !!! now you can use it as a hook in your application!!!

Usage in a component

import React from 'react'
import { useRouter } from 'next/router'
import { useIntl } from '../../../share/hook/intl'

const Spaceship: React.FC = () => {
  const router = useRouter()
  const intl = useIntl(router)
  return <>{ intl.formatMessage({ id: 'spaceship'}) }</>
}

export default Spaceship

Don't hesitate to give me a feedback if something is not clear ;).

[sustainjane98]

Thank you for your input, but I would like some library in the i18next ecosystem, because I use them a long time and I am very familiar with it. But it seems like it should work in a equal manner.

[Psycokwet]

Hello @AlexisPiquet !

I feel like your explanation would deserve a new nextron template :)

I would love to see how does it look !

I have some translation to do in my nextron app as well. I will try to follow your guidelines if I do understand them well enough.

I you don't until I do it (if I succeed in your way), I think I may try to do a template myself :)

Thank you for the explanation !

I will say how it goes when I will try it :)

[alexis-piquet]

Hello Psycokwet,

Oh, thx ;). I use this intl implementation for all of my nextJs projects, but for electron is a bit different 'cause I use a collection to save the selected language.

import { useMemo } from 'react'
import { useCollection } from './collection'
import { IntlShape } from '@formatjs/intl'
import { SERVICE_DATABASE } from '@front/share/constants'
import { LOCALE_FR } from '@front/share/locale'
import intl from '@front/share/intl'

export function useIntl (): IntlShape<string> {
  const { data: countries } = useCollection({ service: SERVICE_DATABASE, model: 'country' })
  const selected_country = countries && countries.find(country => country.selected)
  return useMemo(() => intl[selected_country?.code ?? LOCALE_FR], [ {} ])
}

import React from 'react'
import { SERVICE_DATABASE } from '@front/share/constants'
import { useCollection } from '@front/share/hooks/collection'
import { useHelpers } from '@front/share/hooks/helper'
import styles from './styles.module.scss'

const Countries: React.FC = () => {
  const { api } = useHelpers()
  const collection = useCollection({
    service: SERVICE_DATABASE,
    model: 'country'
  })
  const { data: countries } = collection
  return <div className={styles.countries}>
    { countries && countries.map(country => (
      <span
        key={country.code}
        className={country.selected && styles.selected || ''}
        onClick={() => onClick(country)}>
        {country.code}
      </span>
      ))
    }
  </div>
  async function onClick({ code }) {
    const selected_country = countries.find(country => country.code === code)
    for (const country of countries) {
      const selected = Boolean(country.code === selected_country.code)
      await api.update({
        service: SERVICE_DATABASE,
        model: 'country',
        payload: { ...country, selected }
      })
    }
    await collection.reload()
  }
}

export default Countries

And finally the app :