next사용하는 프로젝트에 적용하려고 하는데 문제가 생겻습니다.

Question

개발환경 : React.js(최신), Next.js(최신), TypeScript, Emotion(Styled-component),chromBrowser firebase설정과 사용부분만 배워보려고 강의 수강중인데 설정하고 hook제작하고 테스트 해보려는데 500에러가 납니다. env문제인것 같아서 process.env.REACT_APP_API_KEY 이런 식으로 하니 이번엔 config파일 아래에 있는 const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); const appAuth = getAuth(); const appFireStore = getFireStore(app); 이 부분에 getAnalytics(app); 여기 부분에 에러가 나면서 window is undefined라는 에러가 나옵니다. 서버사이드 렌더링 과정에서 문제가 생기는 것인가요? 도저히 해결법을 모르겠어서 질문 남깁니다.

-J- · Answer

안녕하세요 malcomex님! 반갑습니다! 우선 getAnalytics(app); 이 부분에서 에러가 나신다고 말씀주셨는데요! 저희 강의에서는 파이어베이스에 에널리틱스를 붙이고 있지 않고 있습니다. 그렇다면 혹시 파이어베이스 프로젝트를 처음에 셋업하실 때 에널리틱스 설정을 하셨을까요?? 일단 이것부터 확인이 필요해 보입니다! 만약 설정을 하셨다면 https://stackoverflow.com/questions/69799682/firebase-analytics-with-next-js-window-not-definded 혹은 https://devsolus.com/2022/09/13/referenceerror-window-is-not-defined-firebase-analytics/ 위의 링크를 참고해보시기 바랍니다! 둘 다 Next.js 를 이용했을 경우의 레퍼런스가 될 수 있어 보입니다 :) 감사합니다!