A Hydration completed but contains mismatches error occurs when the root page is redirected to another language page based on browser language detection in a statically generated site.
- Use locale messages in the template.
- Make it so that the
detectBrowserLanguage
cookie stores a non-default locale. - Directly access the root page, which triggers a redirect based on the locale saved in the cookie, resulting in a hydration error.