What is the best way to support multiple languages in a JS web app?

I am currently working to implement multiple language support in a web app. Large parts of the website exist inside a canvas element, this means that auto-translate from browsers cannot translate it.

Currently I am working on a system where language variations are stored in an object like this:

export const TextContent = {
    en: ['Hello', 'Goodbye'],
    de: ['Hallo', 'Auf Wiedersehen'],
    fr: ['Bonjour', 'Au revoir'],
}

The content for the website is then generated with code like this: createElement('div', TextContent['en'][0]) or canvas.drawText(..., TextConent['en'][0])

However I don't think this is the best way to do it. I have read other posts online were people recommend storing all of the text in JSON files like this:

content.en.json
{
    "hello": "hello"
}

content.fr.json
{
    "hello": "Bonjour"
}

This seems a bit cumbersome to me. I have also seen examples of people storing languages in key-value pair files. Such as

content.en.txt
hello=Hello
goodbye=Goodbye

content.fr.txt
hello=Bonjour
goodbye=Au revoir

Neither of those methods, or my own one, seem particularly good.

I am not using any framework like React or Vue.

What is the industry standard for this? Are there any good NPM packages for implementing this. I would really appreciate some advice. Thank you.