In Next.js Error [ReferenceError: HTMLCanvasElement is not defined]

Question

import React, { useEffect, useRef } from "react";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const ThreeJS = () => {
  const canvasRef = useRef < HTMLCanvasElement > null;
  useEffect(() => {
    if (canvasRef.current) {
      const scene = new THREE.Scene();
      const renderer = new THREE.WebGLRenderer({
        canvas: canvasRef.current,
        antialias: true,
      });
      renderer.outputEncoding = THREE.sRGBEncoding;
      const camera = new THREE.PerspectiveCamera(30, 1);
      camera.position.set(0, 0, 5);
      const loader = new GLTFLoader();
      scene.background = new THREE.Color("white");
      const light = new THREE.DirectionalLight(0xffff00, 10);
      scene.add(light);

      loader.load("/scene.gltf", (object) => {
        scene.add(object.scene);
        renderer.render(scene, camera);
      });
    }
  }, [canvasRef]);

  return (
    <canvas ref={canvasRef} id="canvas" width="1000" height="1000"></canvas>
  );
};

export default ThreeJS;

I want to 3D rendering in Next.js. So I used the three.js library like the code above.

But when I run the code, I get the following error: ReferenceError: HTMLCanvasElement is not defined.

error Image

how can I fix this error?