Firebase CLI를 사용해 Next.js 웹 앱을 Firebase에 배포하고 Firebase Hosting으로 이를 제공할 수 있습니다. CLI는 Next.js 설정을 따르고 추가 구성을 0개 또는 최소한으로 하여 이를 Firebase 설정으로 변환합니다. 앱에 동적 서버 측 로직이 포함되어 있는 경우 CLI는 해당 로직을 Cloud Functions for Firebase에 배포합니다. 지원되는 최신 Next.js 버전은 13.4.7입니다.
시작하기 전에
Firebase에 앱을 배포하기 전에 다음 요구사항 및 옵션을 검토하세요.
- Firebase CLI 버전 12.1.0 이상. 선호하는 방법으로 CLI를 설치하세요.
선택사항: Firebase 프로젝트에서 결제 사용 설정(SSR을 사용하려는 경우는 필수)
선택사항: 실험용 ReactFire 라이브러리를 사용하여 Firebase 친화적인 기능의 이점 활용
Firebase 초기화
시작하려면 프레임워크 프로젝트를 위해 Firebase를 초기화하세요.
새 프로젝트에 Firebase CLI를 사용하거나 기존 프로젝트에서 firebase.json을 수정합니다.
새 프로젝트 초기화
- Firebase CLI에서 웹 프레임워크 미리보기를 사용 설정합니다.
firebase experiments:enable webframeworks
CLI에서 초기화 명령어를 실행한 후 메시지를 따릅니다.
firebase init hosting
'웹 프레임워크(실험용)를 사용하시겠어요?'라는 질문에 '예'라고 답하세요.
호스팅 소스 디렉터리를 선택합니다. 기존 Next.js 앱인 경우 CLI 프로세스가 완료되고 다음 섹션으로 진행할 수 있습니다.
메시지가 표시되면 Next.js를 선택합니다.
정적 콘텐츠 제공
Firebase를 초기화한 후 표준 배포 명령어를 사용하여 정적 콘텐츠를 제공할 수 있습니다.
firebase deploy
실제 사이트에서 배포된 앱을 확인할 수 있습니다.
동적 콘텐츠 사전 렌더링
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);