Firebase로 로그인 코드 Vercel로 배포중 오류들 메모

1.
Application error: a client-side exception has occurred while loading webtoonnet-n4bh2y2oh-zermzerms-projects.vercel.app (see the browser console for more information).
원인 : 이건 배포는 성공했는데 
Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).
배포된 환경에서 api키가 유효하지 않아서 발생

해결 : → Vercel → Project → Settings → Environment Variables에서 key value 기입

 

 

2.
Error occurred prerendering page "/_not-found".
Read more: https://nextjs.org/docs/messages/prerender-error
Error [FirebaseError]: Firebase:
Error (auth/invalid-api-key). at bD (.next/server/chunks/ssr/[root-of-the-server]__a3591f5c._.js:1:33311) at bE (.next/server/chunks/ssr/[root-of-the-server]__a3591f5c._.js:1:33360) at _.instanceFactory (.next/server/chunks/ssr/[root-of-the-server]__a3591f5c._.js:1:84093) at ab.getOrInitializeService (.next/server/chunks/ssr/[root-of-the-server]__a3591f5c._.js:1:13422) at ab.initialize (.next/server/chunks/ssr/[root-of-the-server]__a3591f5c._.js:1:12830) at cN (.next/server/chunks/ssr/[root-of-the-server]__a3591f5c._.js:1:70866) at dz (.next/server/chunks/ssr/[root-of-the-server]__a3591f5c._.js:1:84730) at module evaluation (.next/server/chunks/ssr/[root-of-the-server]__a3591f5c._.js:12:43835) at instantiateModule (.next/server/chunks/ssr/[turbopack]_runtime.js:715:9) at getOrInstantiateModuleFromParent (.next/server/chunks/ssr/[turbopack]_runtime.js:738:12) { code: 'auth/invalid-api-key', customData: [Object], digest: '1127797247' } Export encountered an error on /_not-found/page: /_not-found, exiting the build. ⨯ Next.js build worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1

원인 : Firebase 초기화 + App Router SSR/SSG 구조 문제

빌드 시점(SSG/SSR)에 → Firebase Auth가 실행됐고 → 환경변수(API KEY)를 못 받아서 터짐

왜 _not-found에서 터지나?

 

• _not-found 페이지도 정적 생성(prerender) 대상
• 이때 layout / provider / store / firebase 초기화 코드가 전부 실행됨
• 그 중 Firebase Auth 초기화가 서버에서 실행
• 그래서 바로 터짐

해결 :

zustand는 순수상태 firebase는 client에서만 layout은 server 유지

src/
 ├─ firebase/
 │   └─ client.ts           Firebase 초기화 전용 파일
 │
 ├─ store/
 │   └─ authStore.ts        전역 상태 저장소 (Zustand)
 │
 ├─ providers/
 │   └─ AuthProvider.tsx    인증 사이드이펙트 담당자
 │
 ├─ components/
 │   ├─ ClientProviders.tsx 클라이언트 전용 Provider 묶음
 |
 ├─ providers/
 │   ├─ AuthContext.tsx     UI에서 쓰는 Auth 기능 인터페이스
 │   ├─ AuthProviders.tsx   AuthContext에 실제 구현을 주입
 │
 └─ app/
     ├─ layout.tsx          서버 전용 루트 레이아웃
     ├─ page.tsx

→ 전체적인 구조

 

[브라우저 진입]
   ↓
layout.tsx (서버)
   ↓
ClientProviders (클라이언트 시작)
   ↓
AuthProvider
   └─ Firebase onAuthStateChanged
        ↓
     authStore.setUser()
     authStore.setLoading(false)

UI 컴포넌트
   ├─ 상태 필요 → useAuthStore()
   └─ 액션 필요 → useAuth()

→ 전체적인 흐름