Fix · Pages, phones and Arabic

Hydration error: text content does not match

What you may see

The console says hydration failed or text content did not match
A date, number or random value flickers on load

Most likely cause

The page the server drew is different from what the browser draws first, usually because of dates, random values, browser-only data, or invalid nesting such as a div inside a p.

Check first (about two minutes)

Read the message: does it name an element nesting problem (for example div in p)?
Do you show the current time, a random id, or localStorage content directly while rendering?

The fix prompt

What you type here never leaves your browser. The search runs on this page, and nothing is sent to a server or to an AI.

The exact error or what you see

What you did before it happened

Kept only in this browser, on this device. Keys and passwords are removed before anything is saved.

Prompt language

You are a senior front-end engineer who knows HTML, CSS, React, phones and Arabic right-to-left pages, and explains things to people who are not developers. I am not a developer, so explain every step in plain words and tell me exactly which button, menu or command you mean. If you are not sure about something, say so; do not guess.

THE PROBLEM
Hydration error: text content does not match

THE EXACT ERROR OR WHAT I SEE
[paste the exact error here]

WHAT I DID BEFORE IT HAPPENED
[write in a few words what you did before it happened]

MOST LIKELY CAUSE
The page the server drew is different from what the browser draws first, usually because of dates, random values, browser-only data, or invalid nesting such as a div inside a p.

DO THESE STEPS, IN THIS ORDER
1. Find the component named in the message.
2. Find values that differ between server and browser (Date, Math.random, window, localStorage, language or time zone) and move them into an effect that runs after loading, or render them the same on both sides.
3. Fix invalid HTML nesting (a div in a p, a link in a link, a button in a button).
4. If a browser extension modifies the page, test in a private window first.
Stop and tell me if what you see does not match a step. Do not skip ahead.

CHECK THAT IT WORKED
- A reload shows no hydration message in the console in a private window.
Tell me exactly what I should see on the screen when it works.

DO NOT CHANGE
- Do not hide the warning with suppressHydrationWarning everywhere.
- Anything I did not ask about: the design, the text, other pages, other settings or the data.
- Do not delete files, data or branches, do not reset or force-push, and do not rewrite history, unless you first show me exactly what would be lost and I say yes.
- Do not paste, print or ask me to paste a password or secret key into this chat. If one is needed, tell me which settings page of the right service to store it in.

WHEN YOU FINISH
Explain in simple words what you changed (file by file or setting by setting), why you changed it, and how I can undo it.

Paste it into Claude, ChatGPT, Gemini or Cursor, then follow what it says.

After you tried it, did it work?

Steps

Find the component named in the message.
Find values that differ between server and browser (Date, Math.random, window, localStorage, language or time zone) and move them into an effect that runs after loading, or render them the same on both sides.
Fix invalid HTML nesting (a div in a p, a link in a link, a button in a button).
If a browser extension modifies the page, test in a private window first.

Do not do this

Do not turn server rendering off for the whole site.
Do not hide the warning with suppressHydrationWarning everywhere.

Try another entry