Next.js应用中Google Translate下拉菜单孟加拉语改英语的方法

你的代码未指定翻译控件的界面语言，Google Translate会默认根据用户浏览器/区域设置选择界面语言，导致下拉菜单显示孟加拉语。只需添加interfaceLanguage: 'en'参数，即可强制控件使用英语界面。

修改后的代码 #

const googleTranslateElementInit = () => {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'en,es,pt',
    autoDisplay: true,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    interfaceLanguage: 'en' // 新增：强制控件界面为英语
  }, 'google_translate_element');
}

<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Next.js 环境额外处理建议 #

由于Next.js是服务端渲染框架，直接插入script标签可能导致google对象未定义报错，建议在客户端环境动态加载脚本：

import { useEffect } from 'react';

export default function YourComponent() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
    script.async = true;
    document.body.appendChild(script);

    window.googleTranslateElementInit = () => {
      new window.google.translate.TranslateElement({
        pageLanguage: 'en',
        includedLanguages: 'en,es,pt',
        autoDisplay: true,
        layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
        interfaceLanguage: 'en'
      }, 'google_translate_element');
    };

    return () => {
      document.body.removeChild(script);
      delete window.googleTranslateElementInit;
    };
  }, []);

  return <div id="google_translate_element"></div>;
}

修改后，翻译控件的下拉菜单及所有界面文字将强制显示为英语，不再受区域/浏览器语言影响。

内容的提问来源于stack exchange，提问作者Akibul Islam