vercel 배포 오류 처리

localStorage is not defined

문제상황

vercel로 배포하는 과정에서 locaslStorage가 정의되지 않았다는 오류 발생

해결

https://velog.io/@hyo123/Next.js-localStorage-에러핸들링

• Next js의 SSR특성상 client-side에서 존재하는 window, documnet전역객체 사용이 불가해 에러가 뜬다고 한다.

→ localStorage를 사용하는 부분 우선 찾아보기

//useSpotifyTokenStore
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

interface SpotifyTokenState {
  spotifyToken: string;
  setSpotifyToken: (spotifyToken: string) => void;
}

export const useSpotifyTokenStore = create<SpotifyTokenState>()(
  typeof window !== 'undefined'
    ? persist(
        (set) => ({
          spotifyToken: '',
          setSpotifyToken: (newSpotifyToken: string) =>
            set({ spotifyToken: newSpotifyToken }),
        }),
        {
          name: 'spotifyAccessToken',
          storage: createJSONStorage(() => localStorage),
        }
      )
    : (set) => ({
        spotifyToken: '',
        setSpotifyToken: (newSpotifyToken: string) =>
          set({ spotifyToken: newSpotifyToken }),
      })
);

• 무한 오류,,,

• 문제 영역이 TrackModule이라는 컴포넌트에서 발생했는데 여기서는 localStorage를 사용하는 코드가 없어서 당황했다
• 그러나 이 컴포넌트를 사용하는 상위컴포넌트를 타고 가다보니
• 컴포넌트에서 커스텀훅으로 쓰는 useGetTrackInfo → 커스텀훅에서 axios인스턴스로 사용한 authAPI인스턴스 → 인스턴스에서 Spotify서버로 요청보낼 때 붙이는 SpotifyAccessToken을 localStorage에서 가져옴
• 이 부분에서 localStorage를 접근하고 있는 것을 발견!

const token =
    typeof window !== 'undefined' ? localStorage.getItem(tokenKey) : null; 
   

• 이렇게 token접근을 클라이언트에서만 가능하게해 SSR에서 발생할 수 있는 오류 해결~!

• Deploy성공~~