import { onAuthStateChanged } from "firebase/auth"; import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { auth } from "../../lib/firebase"; export default function Username() { const [context, setContext] = useState(); const [isLoading, setIsLoading] = useState(true); const router = useRouter(); useEffect(() => { onAuthStateChanged(auth, (data) => { if (data) { setContext(auth); setIsLoading(false); } else { setIsLoading(true); } }); }, [router.query?.message]); return ( <div className="username-main-container"> {!isLoading ? ( <div className="username-container"> <div className="user-img-container"> <img src={context.currentUser?.photoURL} alt={context.currentUser?.displayName} className="user-img" /> </div> <div className="information-container"> <h1>{context?.currentUser?.displayName}</h1> <Link href={`/${router.query?.username}/public`}> <button className="btn">Send Annonymous Messages</button> </Link> </div> </div> ) : null} </div> ); }Quiero mostrar una página 404 personalizada cuando el usuario accede accidentalmente a una URL no válida pero, en cambio, este código solo carga los datos del usuario que ha iniciado sesión actualmente.
Como puede ver, esta es una página estática, así que quiero la solución para páginas estáticas. Sé que puede establecer notFound: true en SSR o establecer el fallback: false en las páginas ISR, pero estoy buscando una solución para páginas completamente estáticas.
// pages/404.js export default function Custom404() { return <h1>404 - Page Not Found</h1> }Esto es para un error personalizado Esto no es necesario, pero si desea un error personalizado, haga esto nextjs lo hará automáticamente por usted si alguien va a una página desconocida, aparecerá este error, puede intentarlo en el desarrollo.
Puede usar getStaticProps dentro de esta página si necesita obtener datos en el momento de la compilación.