Search code examples
reactjsjsxnext.jsgoogle-translategoogle-translation-api

NextJS Google Translate Widget


I have a NextJS application and I want to add Google auto translate widget to my app.

So made a function like this:

function googleTranslateElementInit() {
    if (!window['google']) {
        console.log('script added');
        var script = document.createElement('SCRIPT');
        script.src =
            '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
        document.getElementsByTagName('HEAD')[0].appendChild(script);
    }

    setTimeout(() => {
        console.log('translation loaded');
        new window.google.translate.TranslateElement(
            {
                pageLanguage: 'tr',
                includedLanguages: 'ar,en,es,jv,ko,pt,ru,zh-CN,tr',
                //layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
                //autoDisplay: false,
            },
            'google_translate_element'
        );
    }, 500);
}

And I call this function in useEffect(), it loads but when I route to another page it disappers. When I checked the console I saw translation loaded so setTimeout scope called every time even when I route to another page but translation widget is not appear, only appear when I refresh the page.

How can I solve this?


Solution

  • Thanks to the SILENT's answer: Google no longer support this widget.

    So I'm going to configure next-i18next which is a i18n (lightweight translation module with dynamic json storage) for NextJS.

    Also, I think the problem with this widget was Google's JS code is attach that widget to DOM itself so it's not attached to VirtualDOM, thats why when I route in app, React checked VirtualDOM and update DOM itself so the widget disappear because it's not on VirtualDOM. (That's just a guess)