[Next.js] localstorage is not defined

Next.js 는 client-side를 렌더링 하기 전에 SSR을 수행한는데, 이 때 window 전역객체가 로드 되지 않아서 localStorage is not defined 오류가 발생한다.

 

해결 방법들은 아래와 같다고 나오는데..

javascript
if (typeof window !== 'undefined') {
  // Perform localStorage action
  const item = localStorage.getItem('key');
}

javascript
useEffect(() => {
  // Perform localStorage action
  const item = localStorage.getItem('key')
}, [])

axiosInstance를 설정 할 때에는 두가지 방법 다 사용하기 어렵다.

이 땐 아래와 같이 작성하면 된다.

 

javascript
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: `${process.env.NEXT_PUBLIC_API_URL}`,
  headers: {
    'Content-Type': 'application/json',
     accept:'application/json',
  },
});

axiosInstance.interceptors.request.use((config) => {
  const token = localStorage.getItem('accessToken')
    if(token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
})

export default axiosInstance;