DevYoon
[Next.js] document is not defined 에러 해결 본문
Next.js로 개발하던 중 다음과 같은 오류를 만났다.
document가 not defined라니...?!
너무 의아해서 검색해본 결과, Next.js를 사용하기 때문에 만난 에러였다.
Next.js는 서버 측에서 렌더링 된 후 클라이언트로 전송되는 SSR 구조이므로, 클라이언트에서만 정의된 전역변수(window나 document)를 사용하려면 렌더링 후 사용해야 했다.
이 오류를 해결하기 위해서는 3가지 방법이 있다.
1️⃣ document의 type 확인하기
- 해당 오류는 서버 측에서 렌더링 될 때, document의 type이 undefined로 나오기 때문에 발생한다.
- 따라서, document의 type이 undefined가 아닐 때 실행하게 한다.
if(typeof document !== 'undefined'){
document.getElementById("NavBar")
}
2️⃣ 클라이언트 측에서만 실행되도록 하기
- 서버에서 렌더링 될 때는 무시하고, 클라이언트 측에서만 실행하도록 한다.
- process는 프로그램과 관련된 정보를 나타내는 Node.js 객체이다.
if(process.browser){
document.getElementById("NavBar")
}
3️⃣ useEffect 사용하기
- useEffect는 DOM이 형성된 후 실행되는 Hook이므로, useEffect 안에서 window 객체를 사용하면 서버 단에서 체크하지 않는다.
useEffect(()=>{
document.getElementById("NavBar")
}, [])
Next.js를 사용하면서 ServerSideRendering에 대해 어렴풋이 이해하고 있었는데, 해당 오류를 만나고 해결하는 과정에서 어떻게 동작하는지 더 정확하게 알 수 있었다!
참고글
'Web/Next.js' Related Articles
more
