0

I am implementing solana-wallet-adapter to my nextJS app. I got the following error when I run the app: "Hydration failed because the initial UI does not match what was rendered on the server."

How to solve this?

no solution in here worked for me.

Cigdem
  • 11
  • 4

3 Answers3

0

I simply updated google chrome and my problem is solved.

Update:
The same error and "Error: Text content does not match server-rendered HTML." came back the next day. I have no idea why. I will update here when I solve it.

2nd Update:
The solution is here , already covered.

Cigdem
  • 11
  • 4
0

If you have some extensions in your browser that change the view, try disable it, it worked for me. in my case it was Dark Reader extension.

0

In nextjs 13 and in App Router root layout is a by default server component so we can not add a client component to server component example you mark page as "use client"

app/page.js

"use client"

export default function Home() {

  return (
    <main>
      <h1>It produce Hydration Error </h1>
    </main>
  )
}

so just add some extra code

"use client"

import { useState, useEffect } from "react";


export default function Home() {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

  return (
    <main>
      <h1>Success code </h1>
    </main>
  )
}