Error: Hydration failed because the initial UI does not match what was rendered on the server.

[Tarbez]

Describe the bug
Using the default components designed by the library, I can't seem to figure a way to fix this unless I do overwrite most of the work and the files, and since am using a the new version of nextjs somehow I'm facing this issue >

Error: Hydration failed because the initial UI does not match what was rendered on the server.

To Reproduce
Steps to reproduce the behavior:

1. Simply use the library in nextjs 14+
2. the issue for the hydration should appear

Expected behavior
It should not be a button that is wrapping the next component cause then you would have 2 buttons nested.

Screenshots

[crypblizz8]

Saw a similar issue when I tried this and read somewhere dynamic in Next is the best way to resolve this.

i.e.

import dynamic from "next/dynamic";
...

const WalletMultiButtonDynamic = dynamic(
  async () =>
    (await import("@solana/wallet-adapter-react-ui")).WalletMultiButton,
  { ssr: false }
);

...

return (
    <main>
      <div>
        <WalletMultiButtonDynamic>
          ....
        </WalletMultiButtonDynamic>
      </div>
    </main>

Hope that helps.

[jordaaash]

dynamic in Next is the best way to resolve this

Yeah, that's right. The state on the client will always be different than the server because the server can't know about the wallets injected into the browser.