Next.js 및 Firebase에서 처음 로드하는 동안 발생한 오류 해결

결론

이렇게 하면 오류가 발생하지 않습니다. SSR의 Next.js에서Firebase의 초기화를 정상적으로 진행할 수 있습니다.

import fb from "firebase/app";
import "firebase/auth";
import 'firebase/firestore';

export const firebase = !fb.apps.length ? fb.initializeApp(config) : fb.app()
export const firestore = firebase.firestore()

https://github.com/vercel/next.js/discussions/11351

해설

ReferenceError: navigator is not defined

Server Error의 대응 방법
넥스트?js가 서버에서 재현될 시기가 있기 때문에 그때는 이상한 행동이 된 것 같습니다.SSR에 익숙하지 않아 가끔 만난다.
처음에 아래의 보도를 참고하면, window가undefined일 때 초기화되지 않습니다.
https://qiita.com/GENYA/items/cba59f80d9b678c555db

이것 괜찮아요?

// appの初期化
if (!firebase.apps.length) {
  firebase.initializeApp(config);
  firebase.analytics();
  firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
}

export default firebase
export const firestore = firebase.firestore();

이렇게

// appの初期化
if (typeof window !== 'undefined' && !firebase.apps.length) {
  firebase.initializeApp(config);
  firebase.analytics();
  firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL);
}

export default firebase
export const firestore = firebase.firestore();

※ 하지만 이렇게 되면 인티리얼 앱에 어떤 오류가 생길까

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

여기에 Firebase app를 초기화하지 않아서 욕을 먹었어요.
그러면 이렇게 말하지만 서버에서 초기화 처리를 하면 오류가 발생할 수 있습니다.

이 문장으로 해결하다
https://github.com/vercel/next.js/discussions/11351
이번에 import까지 썼어요.
Firebase의default import를 사용하여 fb로 이름 지정
그리고 만약에 응용 프로그램의length가 존재한다면 초기화된 Firebase App을 반환합니다
없으면 FirebaseApp 반환 코드만 쓰면 해결된다.

import fb from "firebase/app";
import "firebase/auth";
import 'firebase/firestore';

export const firebase = !fb.apps.length ? fb.initializeApp(config) : fb.app()
export const firestore = firebase.firestore()