Next.js / React 18 Compatibility

[frankfka]

On a new Next.js app, with this component:

export default function UnsupportedChainBanner() {
  const { chain: currentChain, chains } = useNetwork();
  const { switchNetwork } = useSwitchNetwork({
    chainId: chains[0]?.id,
  });

  // Prompt to switch
  if (currentChain?.unsupported) {
    return (
      <div className="flex w-full items-center justify-between rounded-xl bg-red-700 px-8 py-2 text-white">
        <div className="h-fit">Unsupported Chain ({currentChain.name})</div>
        <button
          className="hover:text-red-200"
          onClick={() => switchNetwork?.()}
        >
          Switch
        </button>
      </div>
    );
  }
  return null;
}

Using this with a Metamask connection will throw: Hydration failed because the initial UI does not match what was rendered on the server

Are there guidelines for using this library with Next.js?

[jxom]

No official first-class SSR solution yet, but there are workarounds. See here: #542 (comment)