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>
);
}
I want to render a custom 404 page when the user accidentally goes to an invalid URL but instead, this code just loads the data of the currently signed-in user.
As you can see this is a static page so I want the solution for static pages. I know you can set notFound: true in SSR or set the fallback: false in ISR pages but I am looking for a solution for completely static pages.
// pages/404.js
export default function Custom404() {
return <h1>404 - Page Not Found</h1>
}This is for custom error This is not necessary but if you want custom error do this nextjs will automatically do this for you if someone go to unknown page this error will popup you can try that on development.
You can use getStaticProps inside this page if you need to fetch data at build time.