Firebase CLI를 사용해 Next.js 웹 앱을 Firebase에 배포하고 Firebase Hosting으로 이를 제공할 수 있습니다.
정적 콘텐츠 제공
Firebase를 초기화한 후 표준 배포 명령어를 사용하여 정적 콘텐츠를 제공할 수 있습니다.
firebase deploy
앱에 동적 서버 측 로직이 포함되어 있는 경우 CLI는 해당 로직을 Cloud Functions for Firebase에 배포합니다. 실제 사이트에서 배포된 앱을 확인할 수 있습니다.
동적 콘텐츠 사전 렌더링
Firebase CLI가 getStaticProps 및 getStaticPaths의 사용을 감지합니다.
선택사항: Firebase JS SDK와 통합
서버 및 클라이언트 번들에 Firebase JS SDK 메서드를 포함하는 경우 제품을 사용하기 전에 isSupported()를 확인하여 런타임 오류로부터 보호하세요.
일부 제품만 모든 환경에서 지원됩니다.
선택사항: Firebase Admin SDK와 통합
브라우저 빌드에 포함된 경우 Admin SDK 번들이 실패합니다. getStaticProps와 getStaticPaths 내에서만 참조하세요.
완전 동적 콘텐츠(SSR) 제공
Firebase CLI가 getServerSideProps의 사용을 감지합니다. 이러한 경우 CLI는 Cloud Functions for Firebase에 함수를 배포하여 동적 서버 코드를 실행합니다. 도메인 및 런타임 구성과 같은 함수에 대한 정보는 Firebase Console에서 볼 수 있습니다
next.config.js로 Hosting 동작 구성
이미지 최적화
Next.js 이미지 최적화 사용은 지원되지만 SSR을 사용하지 않는 경우에도 Cloud Functions for Firebase에서 함수 생성이 트리거됩니다.
리디렉션, 재작성, 헤더
Firebase CLI는 next.config.js의 리디렉션, 재작성, 헤더를 고려하여 배포 시 이에 상응하는 Firebase Hosting 구성으로 변환합니다. Next.js 리디렉션, 재작성, 헤더를 동등한 Firebase Hosting 헤더로 변환할 수 없는 경우 이미지 최적화 또는 SSR을 사용하지 않더라도 대체되어 함수를 빌드합니다.
선택사항: Firebase 인증과 통합
웹 프레임워크 인식 Firebase 배포 도구는 쿠키를 사용하여 클라이언트 및 서버 상태를 자동으로 동기화합니다. SSR의 인증 컨텍스트에 액세스하기 위해 제공된 몇 가지 방법이 있습니다.
- Express
res.locals객체는 필요에 따라 인증된 Firebase 앱 인스턴스(firebaseApp)와 현재 로그인한 사용자(currentUser)를 포함하며,getServerSideProps에서 액세스할 수 있습니다. - 인증된 Firebase 앱 이름은 경로 쿼리(
__firebaseAppName)에 제공됩니다. 이렇게 하면 다음과 같은 상황에서 수동 통합이 가능합니다.
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);