Abort fetching component for route

I have Sign in component which I sent user data to API with next.js API route everything work but after API send me user data { state: true, message: 'your logged in successfully' } I change user route to main "/" but in console I get this error Error: Abort fetching component for route: "/" this only happen in DEV but in Build production I get Uncaught SyntaxError: Unexpected token '<' please help me to fix this

const SigninForm = (props) => {
  const Router = useRouter();
  const usernameRef = useRef();
  const passwordRef = useRef();
  const [isLoading, setIsLoading] = useState(false);
  const [captchaInput, setCaptchaInput] = useState(false);
  const [dataBaseResponse, setDataBaseResponse] = useState({});
  const [fetchedData, setFetchedData] = useState(false);
  const [captchaCode, setCaptchaCode] = useState();
  const sendLoginData = async () => {
    await fetch("/api/formDataSignIN", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        id: usernameRef.current.value,
        password: passwordRef.current.value,
        captchaCode: captchaCode,
      }),
    }).then(async(response) => {
      await response.json().then((data) => {
        setDataBaseResponse({
          message: data.message,
          data,
        });
      });
      
    });
  };

  const handleLoginSendData = async (e) => {

    e.preventDefault();
    await sendLoginData();
    setFetchedData(true);
  };

  useNotification(dataBaseResponse, fetchedData, setFetchedData);

  useEffect(() => {
    const handleStart = (url) => {
      if (url.includes("/")) {
        setIsLoading(true);
      }
    };
    const handleStop = () => {
      setIsLoading(false);
    };
    Router.events.on("routeChangeStart", handleStart);
    Router.events.on("routeChangeComplete", handleStop);
    Router.events.on("routeChangeError", handleStop);

    return () => {
      Router.events.off("routeChangeStart", handleStart);
      Router.events.off("routeChangeComplete", handleStop);
      Router.events.off("routeChangeError", handleStop);
    };
  }, [Router]);
  const handleCaptchaValue = (e) => {
    if (e) {
      setCaptchaInput(true);
      setCaptchaCode(e);
    }
  };
  return (
    <Fragment>
      <Head>
        <title>Sign in</title>
        <meta name="description" content="Generated by create next app" />
      </Head>
      <section className={style.section}>
        <div className={style.container}>
          <div className={cls(style.user, style.signinBx)}>
            <div className={style.imgBx}>
              <Image src="/meta2.jpeg" alt="meta" layout="fill" />
            </div>
            <div className={style.formBx}>
              <form>
                <div
                  style={{
                    marginBottom: "80px",
                  }}
                >
                  <Link href="/" shallow={true}>
                    <a>
                      <FontAwesomeIcon icon={faArrowLeft} />
                    </a>
                  </Link>
                </div>
                <h2>Sign In</h2>
                <input
                  type="text"
                  name="email"
                  ref={usernameRef}
                  placeholder="email or phoneNumber"
                />

                <input
                  type="password"
                  name="Password"
                  ref={passwordRef}
                  placeholder="Password"
                />
                <Googlerecaptcha handleCaptchaValue={handleCaptchaValue} />
                <div className={style.btnBx}>
                  <LoginButton />
                </div>
                <input
                  type="submit"
                  name=""
                  value={isLoading ? "Loading..." : "Login"}
                  onClick={handleLoginSendData}
                />
                <p className={style.signup}>
                  Dont have an account ?
                  <Link href="/signUp" >
                    <a href="">Sign Up</a>
                  </Link>
                </p>
              </form>
            </div>
          </div>
        </div>
      </section>
    </Fragment>
  );
};

export default SigninForm;