如何在 Next.js 中禁用 Google Translate 以防止客户端错误？

问题描述 投票：0回答：1

我的 Next.js Web 应用程序（Next.js 14、React 18）遇到问题。当应用程序加载时，我在浏览器控制台中遇到以下错误：

enter image description here

enter image description here

经过一番调查，我发现如果禁用谷歌翻译，该错误就不再出现。但是，我不想手动要求用户禁用谷歌翻译。我正在寻找一种以编程方式或通过我的网站上的配置禁用 Google 翻译的方法，以防止此错误影响我的用户。 这是我到目前为止所尝试过的，但这些配置不起作用......

  1. _文档.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'",
          },
        ],
      },
    ];
  },

有没有办法配置我的 Next.js 应用程序以防止 Google Translate 干扰我的应用程序的功能，特别是避免此 IndexSizeError？ 有没有办法以编程方式为访问我网站的用户禁用 Google 翻译？

next.js google-chrome-extension
1个回答
0
投票

也许迟到了，但我今天遇到了同样的问题，我得到的解决方案是

<body
        className={montserrat.className}
        translate="no"
      >
        {children}
      </body>

添加translate="no"效果很好 这也是我在layout.jsx中的完整代码

import { Montserrat } from "next/font/google";
import "./globals.css";

const montserrat = Montserrat({
  weight: ["200", "300", "400", "500", "600", "700", "800", "900"],
  subsets: ["cyrillic"],
});

export const metadata = {
  title: "",
  description: "",
};

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body
        className={montserrat.className}
        translate="no"
      >
        {children}
      </body>
    </html>
  );
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.