Next.js 500 Internal Server Error right after calling useEffect Hook inside 404 Page

Question

I am calling the useEffect hook to call a setTimeout function inside it so as to redirect the user back to the home page after 3 seconds using useRouter hook from Next.js and calling the push method on it. The page works fine when i dont call the useEffect hook inside the stateless functional component for 404 page and redirects me to the custom 404 page. But, then i get 500 internal server error every time i call useEffect Hook.

Error

Terminal :next_router__WEBPACK_IMPORTED_MODULE_4___default(...) is not a function at PageNotFound (webpack-internal:///./pages/404.js:23:68) at processChild

import Box from "@material-ui/core/Box";
import Link from "next/link";
import styles from "../styles/Home.module.css";
import useEffect from "react";
import useRouter from "next/router";


const PageNotFound = () => {
  const router = useRouter();

  useEffect(() => {
    setTimeout(() => {
      router.push("/");
    }, 3000);
  }, []);

  return (
    <Box className="page-not-found">
      <h1>Ooops..</h1>
      <h2>That page cannot be found</h2>
      <p>
        Go back to the
        <Link href="/">
          <a className={styles.notFoundHomePageLink}>Homepage.</a>
        </Link>
      </p>
    </Box>
  );
};

export default PageNotFound;

`

Answer 1

It seems like you imported useRouter the wrong way. According to the docs it needs to be like this:

import { useRouter } from 'next/router';