[Next.js] window is not defined

react-animated-cursor 라이브러리를 사용하는데 위와 같은 에러가 떴다.
해당 라이브러리에는 window 객체에 접근하는 코드가 있다.

Node.js는 서버 측 JavaScript 환경이며, "window" 객체는 브라우저 환경에서만 정의되어 있다. 따라서 Node.js 환경에서는 "window" 객체에 접근할 수 없으며, 이러한 접근 시도는 "window is not defined" 에러를 발생시킨다.

즉 서버와 클라이언트 사이에서 실행되는 코드가 달라서, 서버 사이드 랜더링(SSR) 환경에서 클라이언트 전용 객체(window)에 접근하는 것이 문제다.

동적 로딩을 사용하면 라이브러리가 실제로 필요한 시점에 로드되며, 클라이언트 측에서만 실행된다. 서버 사이드 랜더링(SSR) 중에는 해당 라이브러리가 로드되지 않으므로 "window is not defined" 에러가 발생하지 않는다.

Cursor.tsx

"use client";

import React from "react";
import AnimatedCursor from "react-animated-cursor";

function Cursor() {
  return <AnimatedCursor color="255, 255, 255" />;
}

export default Cursor;

page.tsx

import dynamic from "next/dynamic";

export default function Home() {
  const Cursor = dynamic(() => import("@/components/Cursor/Cursor"), {
    ssr: false,
  });

  return (
    <>
      <Cursor />
    </>
  );
}

참고: https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97