I am getting server error with the below code,

Server Error
ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
new V
file:///C:/Users/HP/jackson-next-app/node_modules/@magic-sdk/provider/dist/es/index.mjs (5:11768)
SignIn
webpack-internal:///./components/SignIn.tsx (33:23)
/* eslint-disable jsx-a11y/alt-text */
import Image from "next/image";
import { useMoralis } from "react-moralis";
import styles from "../styles/Home.module.css";
import Logo from "../Assets/IzeBho-real.png";
import { Magic } from 'magic-sdk';
import { useState } from "react";

export default function SignIn() {
  const { authenticate, isAuthenticated, authError, isAuthenticating } =
    useMoralis();

    const customNodeOptions = {
  rpcUrl:'https://speedy-nodes-nyc.moralis.io/371770c39266cc238b4d352b/polygon/mumbai',
  chainId: 80001, // Your own node's chainId
};

const magicLink = new Magic("pk_live_8ABCEDAA72407E22", {
  network: customNodeOptions,
});

  const [email, setEmail] = useState(" ");

  const handleCustomLogin = async () => {
    await authenticate({
      provider: magicLink,
      email: email,
     // apiKey: 
     // network: "mumbai",
    });
  };

  return (
    <div className={styles.card}>
      <Image className={styles.img} src={Logo} width={80} height={80} />
      {isAuthenticating && <p className={styles.green}>Authenticating</p>}
      {authError && (
        <p className={styles.error}>{JSON.stringify(authError.message)}</p>
      )}
      <div className={styles.buttonCard}>
        <input
          type={"email"}
          className={styles.input}
          placeholder="Email"
          value={email}
          onChange={(e) => {
            setEmail(e.target.value);
          }}
        />

        <button className={styles.loginButton} onClick={handleCustomLogin}>
          Login with Email
        </button>
      </div>
    </div>
  );
}

window works only while running the app in browser.