AEM Cloud - How to use i18n values on components for multi language sites?

[surenk]

Re this: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/where-is-the-i18n-translat... assuming Translator (<sever>/libs/cq/i18n/translator.html) is deprecated/not-to-be-used.

We have a component where we need to use i18n strings for name on button

1. We added language folder and json under "ui.apps/src/main/content/jcr_root/apps/my-project/i18n"

2. After deploy, can see the values at "<server>/libs/cq/i18n/dict.nl.json"

How can we use/refer these on the components' html? 

 <div class="btn-row">
    <button
      type="button"
      class="continue-btn"
      aria-label="${'Continue Without Accepting' @ i18n}">${'Continue Without Accepting' @ i18n}
    </button>
  </div>

[Saravanan_Dharmaraj]

Hi @surenk 

       please  check this example.

https://www.tothenew.com/blog/i18n-implementation-using-sightly/

[aanchal-sikka · Accepted solution]

Hello @surenk 

For AaaCS, the i18n UI (<sever>/libs/cq/i18n/translator.html)  is deprecated. Currently, i18n translations need to be deployed with codebase via ui.apps module.

Sample code:

<span class="filter-toggle-button--label">${'Filter' @ i18n}</span>