如何解决浏览器自动翻译导致服务器/客户端内容不匹配的问题

Question

我正在构建一个网站（next14、storyblok、i18n），并且我遇到了谷歌自动翻译功能（格鲁吉亚语或英语）的浏览器问题。格鲁吉亚语是我应用程序中的默认语言，因此如果我选择英语，服务器内容会以英语呈现，但客户端会卡在格鲁吉亚语上。我该如何解决这个问题？

错误 - Prop

lang

不匹配。

Server: "en" Client: "ka"

Next14 中间件（应用程序路由器）的设置如文档中所示

import { NextResponse } from "next/server";
 
let locales = ["ka", "en"]
 
function getLocale(request) { 
  return "ka"
}
 
export function middleware(request) {
  // Check if there is any supported locale in the pathname
  const { pathname } = request.nextUrl
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )
 
  if (pathnameHasLocale) return
 
  // Redirect if there is no locale
  const locale = getLocale(request)
  request.nextUrl.pathname = `/${locale}${pathname}`
  // e.g. incoming request is /products
  // The new URL is now /en-US/products
  return NextResponse.redirect(request.nextUrl)
}
 
export const config = {
  matcher: [
    // Skip all internal paths (_next)
    '/((?!_next).*)',
    // Optional: only run on root (/) URL
    // '/'
  ],
}

页面接受参数中的 lang

export default async function Home({params: {lang} }) {

完整的仓库位于 https://github.com/BryanMF87/bokeria

我尝试更改 getLocale 内容，但不确定如何更改它以使用“ka”作为默认值。

我还尝试将根布局 html lang="ka" 更改为 html lang={lang}，以便它使用参数中的 {lang} 值。我希望这能让客户端适应用户的语言偏好。

Answer 1

在我看来这不是一个理想的答案，但它是一个不错的解决方法。我将 translate="no" 添加到我的 html 标签中。

现在浏览器的自动翻译功能仍然会触发，但无法自动翻译内容，从而防止服务器和客户端之间出现内容不匹配的错误。