如何在 Next js 中呈现 static 客户端呈现页面中的错误 404 页面？

Question

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.

Thank you.

Answer 1

 // 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.