Estoy usando next.js, react18 y next-auth. Tengo un componente de inicio de sesión que verifica la sesión y muestra un enlace de inicio o cierre de sesión, dependiendo de si está conectado o no
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> }esto solía funcionar como se esperaba, pero luego instalé react-bootstrap, cambié los enlaces como este
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>;y comencé a recibir este error
Error: Hydration failed because the initial UI does not match what was rendered on the server.Sé que podría degradar para reaccionar 17 o simplemente usar el componente 'siguiente/enlace', pero estoy buscando una solución antes de rendirme.
No sé mucho sobre next.js, pero el componente Nav.Link de react-bootstrap ya representa un elemento anker, por lo que tiene un enlace en un enlace. Trate de usar lo siguiente:
<Nav.Link href="#" onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Nav.Link>;Veo que prefieres hacer alguna acción que navegar. Tal vez pueda intentar usar Button con variant="link" o simplemente usar otra cosa en lugar del elemento de anclaje.
¿Por qué usa Nav.Link y react-bootstrap? Nav.Link solo agrega estilos, nada más, sin magia.
Es porque está haciendo referencia a la window , que no existe en el servidor. El error también estaba allí en 17, pero React 18 es más estricto y se producirá un error.