How to fix 'ReferenceError: document is not defined' when using ZEGOCLOUD API with Next.js?

Question

I'm working on a web platform for online video conferencing and I'm using ZEGOCLOUD as api with next js but when I run my program I get this error #ReferenceError: document is not defined

import React, {useEffect, useState} from 'react';
import {useRouter} from "next/router";
import {useDispatch, useSelector} from "react-redux";
import {AppDispatch, RootState} from "@/configuration/store/store";
import {interview_interface, UserType} from "@/interface";
import useAuthInterview from "@/configuration/hooks/useAuthInterview";
import {GetInterview} from "@/configuration/slices/interview";
import {ZegoUIKitPrebuilt} from "@zegocloud/zego-uikit-prebuilt";
import {generatedMeetingID} from "@/functions/generatedMeetingID";

const Index = () => {
    useAuthInterview()
    const dispatch = useDispatch<AppDispatch>();
    const router=useRouter()
    const params=router.query.interviewid
    const user=useSelector((state: RootState) => state.interviewUser.userInfo)
    const [isAllow,setIsAllow]=useState<boolean>(true);
    const [userLoaded,setUserLoaded]=useState(true)
    const interviews = useSelector((state: RootState) => state.interview.interviews);
    useAuthInterview()
    const users = useSelector((state: RootState) => state.interviewUser.userInfo?.uid);
    useEffect(() => {
        // @ts-ignore
        if (users?.uid) {
            dispatch(GetInterview())
        }
        setUserLoaded(true)
        // @ts-ignore
        const getMeeting=()=>{
            if ((params?.length && userLoaded)) {
                const interviewData = interviews.filter((item: interview_interface) => item.idinterview === params)
                if (interviewData.length){
                    const iscreator=users
                    if (interviewData[0].interviewtype==='1-on-1'){
                        // compare avec l'id del 'inviter
                        if (interviewData[0].iduser){
                            // compare avec la date d'aujourdhui moment().format('l')
                            if (interviewData[0].interviewdate){
                                setIsAllow(true)
                            }
                        }else{
                            router.push('/entreprise/interview')
                        }
                    }
                }
                else{
                    router.push('./appels')
                }
            }
        }
        getMeeting()
    }, [dispatch,userLoaded])


    const appId = process.env.NEXT_PUBLIC_APPID
    const serverSecret = process.env.NEXT_PUBLIC_SERVERSECRETE
    const monInterview=async (element:any)=>{
        // @ts-ignore
        const kitToken=ZegoUIKitPrebuilt.generateKitTokenForTest(
            // @ts-ignore
            appId,
            serverSecret,
            interviews[0].idinterview as string,
            // @ts-ignore
            users?.uid? user:generatedMeetingID(),
            // @ts-ignore
            user.name?user.name:generatedMeetingID()
        );
        // @ts-ignore
        const zp=await ZegoUIKitPrebuilt.create(kitToken)
        // @ts-ignore
         await zp.joinRoom({
            container: element,
            maxUsers: 50,
            sharedLinks: [{
                name: "lien personnel",
                url: window.location.origin
            }],
            scenario: {
                mode: ZegoUIKitPrebuilt.VideoConference,
            }
        })
    }
    // @ts-ignore
    return (
        <div>
            <div ref={monInterview}>

            </div>
        </div>
    );
};

export default Index;

I tried deleting everything and starting again but it didn't work, but I also tested typeof window without success.

Answer 1

Nextjs is server side framework so document is not available on server side. You can import like this.

import { useEffect } from "react";

export default function YourComponent() {
   useEffect(() => {
     import("zego-express-engine-webrtc").then(({ ZegoExpressEngine }) => {
     // Your code that uses ZegoExpressEngine
     });
    }, []);

   // Rest of your component code
}