Question

0

42

Views

How do I render Error 404 page in a static client side rendered page in Next js?

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.

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-04T12:56:49.088Z

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

Reference

You can use getStaticProps inside this page if you need to fetch data at build time.