search

i18next / next-app-dir-i18next-example-ts

Next.js 13/14 app directory feature in combination with i18next
https://locize.com/blog/next-app-dir-i18n/
117 stars 29 forks source link

Client side hydration errors on first page render #3

Closed OtisTemler closed 1 year ago

OtisTemler commented 1 year ago

🐛 Bug Report

When the client-page is opened directly with anything but not the fallback lang, there's a hydration error on the first page call. On refresh, the error is gone.

Running

console.log('Resolved lang', i18next.resolvedLanguage)

On the client-page/page.tsx, indicates that on the first server render, the resolved lang is en. Only after the first refresh, the server side render resolves correctly to de from the start.

To Reproduce

  1. Clone next-13-app-dir-i18next-example-ts
  2. npm run install
  3. npm run dev
  4. Put this url in your browser and hit enter: http://localhost:3000/de/client-page image

Expected behavior

Should not output a hydration error.

Your Environment

adrai commented 1 year ago

try: https://github.com/i18next/next-13-app-dir-i18next-example-ts/commit/c97207208c9ad50153df2a2be6c9edec32dd639c

OtisTemler commented 1 year ago

Can confirm that fixes it.

Thanks a lot!!