Guidance on multilingual with AEM & React Components

[ChadLeathers]

A key area we are looking to get ahead on is "best practices" for multiple Languages.

I'm reviewing the Translating Content for Multiple Languages documentation 
( https://docs.adobe.com/content/help/en/experience-manager-64/administering/introduction/translation.... ) 

But I can't seem to find a strategy associated with React components used within a page. 

I've put what we're doing today below, but anyone have guidance on how best to approach this? 

Current practice : 

- Create React components with authorable fields 

- So that we can create a secondary page for the additional language 

- And the component is then Authored in that language 

Eg : 

English Page 

- Component : fields Authored in english 

Spanish Page 

- Component : fields Authored to be Spanish 

..

[BrianKasingli · Accepted solution]

The best practice is to utilise the i18n library. To create AEM components once, and use the AEM i18n API to get the values back from the library itself.

Take a look at this quick lesson:

Part 1 - https://www.youtube.com/watch?v=e4o0nFQSBPU&ab_channel=AEMandDevopsTutorial

Part 2 - https://www.youtube.com/watch?v=gCoh5lbnAeU&ab_channel=AEMandDevopsTutorial

Keep in mind, an example of a ready-to-go, all setup i18n structure can be reflected in the AEM Maven Archetype project. 

Regards,
Brian