Compatibility nextjs14 app router and thirdwebsdk

[Assowavesss]

Here is my component Mint :

"use client";

export { useMintNFT, useContract, Web3Button } from '@thirdweb-dev/react';

const contractAddress = '0x8e899517Bf0267A01D4c8A743e464ffA66Bf2b73';

const Mint = (): JSX.Element => {
  const { contract } = useContract(contractAddress);
  const { mutateAsync: mintNft } = useMintNFT(contract);

  return (
<Web3Button
      contractAddress={contractAddress}
      action={() =>
        mintNft({
          metadata: {
            name: 'My NFT',
            description: 'This is my NFT',
            image: 'ipfs://example.com/my-nft.png', // Accepts any URL or File type
          },
          to: '0x9Af59851F1DB624c7b6865Ab55882C53e6D4Ec71', // Use useAddress hook to get current wallet address
        })
      }
>
      Mint NFT
</Web3Button>
  );
};

export default Mint;

and my app page here with mint imported

import Mint from '@/components/Mint';
import SignUpForm from '@/components/SignUpForm';

export default function SignUp() {
  return (
<div className='flex h-screen flex-col items-center justify-center gap-2'>
<h1 className='m-4 text-6xl font-bold'>About you</h1>
<p>Tell us more about you !</p>
<SignUpForm />
<Mint />
</div>
  );
}

And I got the following error

Error occurred prerendering page "/sign-up". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Invariant failed

[MananTank]

Hi @Assowavesss - Can you show how the ThirdwebProvider is configured?

Also, please refer to Getting started with Next.js > App router documentation and let me know if you have followed the mentioned steps