목록2024/03/01 (1)

My Boundary As Much As I Experienced

Next.js) window is not defined 오류 해결법 (Dynamic Import)

문제 Next.js 환경에서 window 객체에 접근해야되는 일이 생겼다. useInnerWidth하는 훅을 만들어서 resize 이벤트를 감지해서 위 gif 스티커들의 좌표와 크기를 반응형으로 조절해주는 기능을 구현하기 위해 필요했다. 그런데 Next.js 환경에선 window객체에 접근하면 referenceError: window is not defined라는 에러를 반환한다. 원인 Next.js에선 기본적으로 ssr로 페이지를 로딩하기 때문에 window 전역 객체가 브라우저를 뜻하지 않는다. 그러므로 구글에서 next.js의 window객체 접근 에러에 대해 찾아보면 흔히 'csr로 전환하기 위해서 "use client"를 해주면 해결된다.'라고 흔히 답을 찾을 수 있는데 이것만으로는 부족할 수 ..
FrontEnd/Next.js 2024. 3. 1. 02:58
이전 Prev 1 Next 다음