← All errors · Next.jsReact & Next.js rendering errors

Text content does not match server-rendered HTML

Exact error

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

What it means

A text node rendered differently on the server and in the browser. It is the same class of problem as a hydration failure, narrowed down to text.

Likely causes

• Dates/times formatted with the user's locale or time zone.
• Random IDs or numbers generated during render.
• Reading from localStorage or cookies only available on the client.

How to fix it

1. Format dates with an explicit time zone and locale so server and client agree:

   new Intl.DateTimeFormat('en-US', { timeZone: 'UTC', dateStyle: 'medium' }).format(date)

2. For stable IDs, use React's useId() instead of Math.random():

   import { useId } from 'react';
   const id = useId();

3. Defer client-only values to useEffect (see the hydration failed fix).

Prevent this next time

• Add ESLint with eslint-config-next (includes the React Hooks rules) and fix warnings before shipping.
• Run `next build` in CI on every pull request so hydration and render errors surface before production.

Guide: catch outages before your users do.

Related errors

• Hydration failed because the initial UI does not match what was rendered on the server
• ReferenceError: window is not defined