Firebase CLI'yi kullanarak Next.js web uygulamalarınızı Firebase'e dağıtabilir ve Firebase Hosting ile yayınlayabilirsiniz. CLI, Next.js ayarlarınıza saygı duyar ve bunları Firebase ayarlarına çevirir. Bu işlem için sizden sıfır veya minimum düzeyde ek yapılandırma gerekmez. Uygulamanız dinamik sunucu tarafı mantığı içeriyorsa KSA bu mantığı Cloud Functions for Firebase'e dağıtır. Desteklenen en son Next.js sürümü 13.4.7'dir.
Başlamadan önce
Uygulamanızı Firebase'e dağıtmaya başlamadan önce aşağıdaki koşulları ve seçenekleri inceleyin:
- Firebase 12.1.0 veya daha yeni bir KSA sürümü. Tercih ettiğiniz yöntemi kullanarak CLI'yi yüklediğinizden emin olun.
İsteğe bağlı: Firebase projenizde faturalandırma etkinleştirilmiş olmalıdır (SSR'yi kullanmayı planlıyorsanız gereklidir).
İsteğe bağlı: Firebase'e uygun özelliklerinden yararlanmak için deneysel ReactFire kitaplığını kullanın
Firebase'i başlatma
Başlamak için Firebase'i çerçeve projeniz için ilk olarak hazırlayın.
Yeni bir proje için Firebase CLI'yi kullanın veya mevcut bir proje için firebase.json dosyasını değiştirin.
Yeni projeyi başlatma
- Firebase CLI'de web çerçeveleri önizlemesini etkinleştirin:
firebase experiments:enable webframeworks
CLI'den başlatma komutunu çalıştırın ve ardından talimatları uygulayın:
firebase init hosting
"Web çerçevesi kullanmak istiyor musunuz?" sorusuna evet yanıtını verin. (deneysel)"
Barındırma kaynak dizininizi seçin. Mevcut bir Next.js uygulamasıysa CLI işlemi tamamlanır ve sonraki bölüme geçebilirsiniz.
İstenirse Next.js'i seçin.
Statik içerik sunma
Firebase'i başlattıktan sonra standart dağıtım komutuyla statik içerik yayınlayabilirsiniz:
firebase deploy
Dağıtılmış uygulamanızı canlı sitesinde görüntüleyebilirsiniz.
Dinamik içeriği önceden oluşturma
Firebase CLI, getStaticProps ve getStaticPaths işlevlerinin kullanımını algılar.
İsteğe bağlı: Firebase JS SDK'sı ile entegrasyon yapın
Firebase JS SDK yöntemlerini hem sunucu hem de istemci paketlerine dahil ederken ürünü kullanmadan önce isSupported() değerini kontrol ederek çalışma zamanında oluşabilecek hatalara karşı önlem alın.
Bazı ürünler tüm ortamlarda desteklenmez.
İsteğe bağlı: Firebase Admin SDK'sı ile entegrasyon
Tarayıcı derlemenize dahil edilen Admin SDK paketleri başarısız olur. Bu paketlere yalnızca getStaticProps ve getStaticPaths içinden referans verin.
Tamamen dinamik içerik yayınlama (SSR)
Firebase KSA, getServerSideProps işlevinin kullanımını algılar. Bu gibi durumlarda CLI, dinamik sunucu kodunu çalıştırmak için işlevleri Cloud Functions for Firebase'e dağıtır. Bu işlevlerle ilgili bilgileri (ör. alan ve çalışma zamanı yapılandırması) Firebase konsolunda görüntüleyebilirsiniz.
Hosting davranışını next.config.js ile yapılandırma
Resim optimizasyonu
Next.js Resim Optimizasyonu'nun kullanılması desteklenir ancak SSR kullanmıyor olsanız bile bir işlevin oluşturulmasını tetikler (Cloud Functions for Firebase içinde).
Yönlendirmeler, yeniden yazmalar ve üstbilgiler
Firebase CLI, next.config.js'teki yönlendirmeleri, yeniden yazmaları ve üstbilgileri dikkate alarak bunları dağıtım sırasında ilgili eşdeğer Firebase Hosting yapılandırmasına dönüştürür. Next.js yönlendirmesi, yeniden yazma veya başlık eşdeğer bir Firebase Hosting başlığına dönüştürülemiyorsa resim optimizasyonu veya SSR kullanmıyor olsanız bile yedek olarak bir işlev oluşturur.
İsteğe bağlı: Firebase Authentication ile entegrasyon
Web çerçevesi uyumlu Firebase dağıtım araçları, çerezleri kullanarak istemci ve sunucu durumunu otomatik olarak senkronize eder. SSR'de kimlik doğrulama bağlamına erişmek için bazı yöntemler sağlanır:
- Express
res.localsnesnesi isteğe bağlı olarak kimliği doğrulanmış bir Firebase uygulaması örneği (firebaseApp) ve şu anda oturum açmış kullanıcıyı (currentUser) içerir. Bu nesneyegetServerSidePropsüzerinden erişilebilir. - Kimliği doğrulanmış Firebase uygulamasının adı, rota sorgusunda (
__firebaseAppName) sağlanır. Bu, bağlamda manuel entegrasyona olanak tanır:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);