발생한 에러
원티드 프리온보딩에서 처음으로 nextjs를 사용하면서
api 요청시에 헤더에 token을 실어 보내기 위해
로컬스토리지에 저장한 토큰을 get 요청하는 api 함수에서 사용하려는데
로컬스토리지를 찾을 수 없다고 오류가 발생했다
에러 해결 방법
함수 안으로 로컬스토리지에서 토큰값을 가져와서 선언 할당하는
방식으로 코드를 수정하니 에러가 해결됐음
에러를 너무 간단하게 해결했지만 리액트에서는 발생하지 않던 오류가 왜 발생하는지 궁금해서
구글링을 통해 관련 자료를 찾아봤다.
에러 원인
Next.js가 클라이언트 렌더링 전에 서버 렌더링을 수행하기 때문에 발생하는 에러
즉, 페이지가 클라이언트에 로드되고 window 객체가 정의될 때까지
localStorage에 액세스할 수 없기 때문에 발생하는 에러였다
출처 : https://developer.school/snippets/react/localstorage-is-not-defined-nextjs
다른 해결방법
- useEffect 를 사용하기
useEffect는 클라이언트 사이드에서만 동작하는 훅이기 때문에
로컬스토리지에 접근할 수 있음, 위와 같은 에러 해결방법으로 사용할 수 있다고 함