I am using next.js, react18 and next-auth. I have a login component that checks the session and displays a login or logout link, depending on you are logged in or not
import Link from 'next/link';
const Login = () => {
const {data: session} = useSession();
if (session) {
return <Link href="#"><a onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Link>
} else {
return <Link href="#"><a onClick={() => signIn()}>Log in</a></Link>
}
this used to work as expected, but then I installed react-bootstrap, I changed the links like this
import {Nav} from "react-bootstrap";
return <Nav.Link href="#"><a onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Nav.Link>;
return <Nav.Link href="#"><a onClick={() => signIn()}>Log in</a></Nav.Link>;
and I started to get this error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
I know I could downgrade to react 17 or just use the 'next/link' component but I am looking for a workaround before to give up.
I don't know much about next.js, but react-bootstrap's Nav.Link component already renders an anker element, so you have link in a link. Try to use following:
<Nav.Link href="#" onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Nav.Link>;
I see you rather doing some action then navigating. Maybe you can try to use Button with variant="link" or just use something else instead of anchor element.
Why do you use Nav.Link and react-bootstrap at all? Nav.Link only add styles, nothing else, no magic.
It's because you're referencing the window, which doesn't exist on the Server. The error was there in 17 as well, but React 18 is stricter, and will error out.