Search code examples
next.jsgoogle-chrome-extension

How to Disable Google Translate in Next.js to Prevent client side errors?

I’m facing an issue in my Next.js web app (Next.js 14, React 18). When the app loads, I encounter the following errors in the browser console:

enter image description here

enter image description here

After some investigation, I discovered that if I disable Google Translate, the error no longer occurs. However, I don’t want to manually ask users to disable Google Translate. I’m looking for a way to disable Google Translate programmatically or through configuration on my site to prevent this error from affecting my users. Here’s what I’ve tried so far but those configurations are not working...

  1. _document.ts
  <Html lang="en" translate="no">
      <Head>{emotionStyleTags}</Head>
      <body translate="no">
        <Main />
        <NextScript />
      </body>
    </Html>
  1. next.config.js
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Content-Security-Policy',
            value: "frame-ancestors 'self'",
          },
        ],
      },
    ];
  },

Is there a way to configure my Next.js app to prevent Google Translate from interfering with my app’s functionality, specifically to avoid this IndexSizeError? Is there a way to programmatically disable Google Translate for users who visit my site?

Solution

  • This is my solution:

    1. Add the following meta tags to prevent translation:
     <html lang="en" translate="no" className="notranslate">
  <head>
    <meta name="googlebot" content="notranslate" />
    <meta name="google" content="notranslate" />
  </head>

</html>

    1. Resolve code-breaking issues: I discovered some parts of my code were causing the web application to break. To address this, I added the eslint-plugin-react-google-translate library to lint and format my code, ensuring compatibility and stability.

      npm install eslint-plugin-react-google-translate --save-dev

    And update my eslint configuration

     {
  "plugins": ["react-google-translate"],
  "rules": {
    "react-google-translate/no-conditional-text-nodes-with-siblings": "error",
"react-google-translate/no-return-text-nodes": "error",
  }
}