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.
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.
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>
)
}