How to arrange my data for bilingual site

[Sylvant]

My latest project idea is to create a site advertise a restaurant and one of the challenges ive set for me is to make it possible for users to choose it displayed in English or my native language. I would be glad if anyone that had experience with such project can give me recommendation on how to organise my data(the strings that will be representing titles, menus, paragraphs etc). The way i see it, i can either set one big object/array for one language and one for the other and include within identical cathegories, or i can define the cathegories and on every end point, i can set the text for one language and the text for the other. Ill try to visualise it with a very basic example:

//two objects for each language
const EN={
  title: 'Welcome',
  menu: 'Menu',
  dishes: ['pizza', 'potatoes', 'salad']
}
const BG={
  title: 'Добре Дошли',
  menu: 'Меню',
  dishes: ['пица', 'картофи', 'салата']
}

//one object offering values for each language
const data={
  title: ['Welcome', 'Добре Дошли'],
  menu: ['Menu', 'Меню'],
  dishes: [['pizza', 'potatoes', 'salad'], ['пица', 'картофи', 'салата']]
}

[kevinSmith]

The typical structure is to have json (or js or whatever) files for each language with matching structures, similar to what you have in the first example. You usually use an i18n library to access it, using a function like “t” to access it, sending a path, like t('title'). The module detects the current language setting of the system or you can set it manually.

There are a lot of libraries out there using the same structure (at least in my experience), I would use one of those. They are pretty lightweight and also give some other functionality, like defaulting and dealing with plurals and passed in variables. I’ve used i18n and i18next before and they’re good - I imagine they’re all pretty much the same.

[kevinSmith]

The i18next package has nearly 2M downloads a week, not bad.