Next.js 'Text content does not match server-rendered HTML'? What causes hydration errors
Ship ItChecked against the official source
Source checked 8 Nov 2026 · Published 9 Nov 2026 · Last reviewed 9 Nov 2026 · By Ctrl+Z Therapy (how we test)
The short answer
Next.js's error docs: there was a difference between the React tree that was prerendered from the server and the React tree that was rendered during the first render in the browser. Common causes are incorrect nesting of HTML tags, such as a div nested in a p tag, browser-only APIs like window or localStorage in your rendering logic, the Date() constructor, and browser extensions modifying the HTML.
What to do
- Fix wrongly nested tags, such as a p inside another p or a div inside a p.
- Move browser-only code into useEffect, which runs after hydration, so the server and the first client render match.
- Or load that component with next/dynamic and ssr: false to turn off prerendering for it.
Good to know
- For content that must differ, like a timestamp, suppressHydrationWarning silences the warning one level deep. Next.js says not to overuse it.
- On iOS, automatic detection of phone numbers and email addresses can cause mismatches; Next.js shows a format-detection meta tag to turn it off.
Source
Checked on 8 Nov 2026. Prices, limits and settings change, so check the source before you rely on them.