Error: Text content does not match server-rendered HTML.

[Alexandre Gérault]

Hi 👋

What version of this package are you using?
I'm using version 2.6.0 of next-translate and next-translate-plugin.

{
  "name": "made-website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@formatjs/intl-localematcher": "^0.4.2",
    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-slot": "^1.0.2",
    "@types/node": "20.5.1",
    "@types/react": "18.2.20",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.18",
    "lucide-react": "^0.268.0",
    "negotiator": "^0.6.3",
    "next": "13.4.18",
    "next-themes": "^0.2.1",
    "next-translate": "^2.6.0",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.10.1",
    "tailwind-merge": "^1.14.0",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.6",
    "typescript": "5.1.6"
  },
  "devDependencies": {
    "@types/negotiator": "^0.6.1",
    "next-translate-plugin": "^2.6.0"
  }
}

What operating system, Node.js, and npm version?
My npm and node versions:

➜  made-website git:(main) ✗ npm -v
9.5.1
➜  made-website git:(main) ✗ node -v
v18.16.0

I'm using a macOS Ventura 13.4.1.

What happened?
I've been following the installation guide to add translations to my website. It loads well on the first render after the server started up. Then, whenever I refresh the page, I get an error

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

Warning: Text content did not match. Server: "connexion" Client: "login"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
span
div
div
header
Navbar
./src/components/navbar.tsx (37:92)
f
./node_modules/next-themes/dist/index.module.js (8:597)
$
./node_modules/next-themes/dist/index.module.js (8:348)
ThemeProvider
./src/components/theme-provider.tsx (13:11)
body
html
Call Stack
checkForUnmatchedText
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (31290:0)
diffHydratedProperties
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (33391:0)
hydrateInstance
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (34434:0)
prepareToHydrateHostInstance
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (6974:0)
completeWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18655:0)
completeUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24732:0)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24537:0)
workLoopConcurrent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24512:0)
renderRootConcurrent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24468:0)
performConcurrentWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23339:0)
workLoop
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (261:0)
flushWork
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:0)

What did you expect to happen?
I'm expecting it to translate correctly my strings as it did for the initial render after server start.

Are you willing to submit a pull request to fix this bug?
I don't think I'd be able to submit a pull request as I don't even understand where it comes from. I read issues speaking about client components behaving a bit similarly but appeared to be fixed in 2.4 or something like that.

I also have a link to the versionned version of the beginning app. It is very minimalistic for now

[Arthur]

Hello, I encountered the same error. I fixed it by moving all components importing useTranslation() under the /app/[lang]/ directory.

In your example, I think you need to create the /[lang] directory and only use your navbar component inside.

[Alexandre Gérault]

I guess it's not enough to use the /[lang] as I end up with a 404. Maybe I've some configuration to do (I tried http://localhost:3000/fr and http://localhost:3000/en)

[andre-lergier]

I have the same error.
In my case it encounters in routes, that are still in pages folder and not yet migrated to the new App router.

[Vlad]

I'm on using the App router and was having the same issue but setting my next.config.js like this fixes the issue.

`
/** @type {import('next').NextConfig} */
const nextConfig = {};
const nextTranslate = require("next-translate-plugin");

const config = nextTranslate(nextConfig)
config.i18n = undefined;
module.exports = config;
`

However doing this will affect the behaviour when trying to get the locale from request.nextUrl.locale in the middleware, now the locale is undefined.

[andre-lergier]

const config = nextTranslate(nextConfig);
config.i18n = undefined;
module.exports = config;

With this solution the react hydration mismatch error still exists in my case.
Additionally it breaks i18n functionalities in pages folder, it's only showing the default language.

[Vlad]

const config = nextTranslate(nextConfig);
config.i18n = undefined;
module.exports = config;

With this solution the react hydration mismatch error still exists in my case. Additionally it breaks i18n functionalities in pages folder, it's only showing the default language.

Yes this is not going to work for the pages folder, this will just fix the 404 error are you getting the hydration error when you switch language?