[next.js] window 객체가 undefined일 때

동생의 포트폴리오 홈페이지를 next.js를 써서 간단하게 만들어주고 있다.
작품 사진이 있는 /works 페이지에서 작품 이미지들을 드래그 & 드랍할 수 있도록 구현하고 있는데,
모바일을 고려하면 터치도 지원해야할 것 같아서 터치도 지원하도록 구현하고 있다.
그런데 이제 라이브러리 없이!

구현할 때까지만해도 큰 문제가 없었는데 배포하고 보니 모바일 화면에서 터치가 구현이 제대로 안되었다.
window.innerWidth를 사용해서 이 이상으로는 이미지가 움직이지 못하도록 제한을 걸어놓았는데, 
SSR의 특성상 서버에서 HTML을 다 만들어서 주기 때문에 이 시점에는 window 객체가 없어 undefined가 뜨는 것이었다.

SSR의 특성까지 생각해보면 자연스러운 현상인데!
검색해보니 다양한 방법들이 나와있었다.

1. window 객체를 브라우저에서 체크해주기

if (typeof window !== "undefined") {
  // window 객체가 undefined가 아닐 때만 실행되는 코드 적어주기
}

2. useEffect 내부에서 사용하기

useEffect(() => {
    // useEffect는 매 랜더링 이후에 클라이언트 쪽에서 실행된다. 
}, [])

3. dynamic import를 사용해서 해당 컴포넌트만 SSR이 아니도록 설정해주기

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'), // dynamic import 할 컴포넌트를 불러오고,
  { ssr: false } // SSR 옵션을 false로 설정해준다.
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

이 외에도 componentDidMount() 혹은 componentWillMount()를 사용하는 방법도 있지만..
hook을 주로 쓰니 가져와 정리하지는 않았다.
dynamic import로 해결 완료!

역시 하면 할 수록 재밌다 키키

출처: https://stackoverflow.com/questions/55151041/window-is-not-defined-in-next-js-react-app