[NextJS / 오류] navigator is not defined 해결 방법

 

 

 

 

1. 문제 원인

NextJS의 경우 SSR(Server Side Rendering)으로 서버에서 미리 HTML을  준비해 클라이언트한테 응답해주는데 
최초 웹 페이지를 렌더링 할때에는 window나 document 전역객체는 선언되지 않아 해당 변수를 참조할 수 없기 때문에 해당 오류가 발생한다.

 

SSR이란?
서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다.

2022.10.11 - [React] - [NextJS] Pre-Rendering, Client-Side-Rendering, Server-Side-Rendering 개념

 

 

 

 

---

2. 해결 방법

useEffect 사용 
useEffect은 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.
렌더링 후에 navigator 객체를 호출하여 오류를 해결한다.

  const [mobile, setMobile] = useState(false);

  useEffect(() => {
    const user = navigator.userAgent;
    if (user.indexOf("iPhone") > -1 || user.indexOf("Android") > -1) {
      setMobile(true);
    }
  }, [mobile]);