Firebase CLI'ı kullanarak Next.js Web uygulamalarınızı Firebase'e dağıtabilir ve Firebase Hosting ile sunabilirsiniz. CLI, Next.js ayarlarınıza uyar ve bunları sıfır veya çok az ekstra yapılandırma ile Firebase ayarlarına çevirir sizin görevinizdir. Uygulamanız dinamik sunucu tarafı mantığı içeriyorsa CLI bu Cloud Functions for Firebase mantığına entegre edilir. Desteklenen en son Next.js sürümü 13.4.7'dir.
Başlamadan önce
Uygulamanızı Firebase'e dağıtmaya başlamadan önce şu koşulları ve seçenekleri inceleyin:
- Firebase CLI 12.1.0 veya sonraki sürümler. Şunları yaptığınızdan emin olun: KSA'yı yükleme tercih ettiğiniz yöntemi kullanın.
İsteğe bağlı: Firebase projenizde faturalandırmanın etkin olması (SSR kullanmayı planlıyorsanız gereklidir)
İsteğe bağlı: özelliklerinden yararlanmak için deneysel ReactFire kitaplığını kullanın Firebase'e uygun özellikler
Firebase'i başlatma
Başlamak için çerçeve projenizde Firebase'i başlatın.
Yeni bir proje için Firebase CLI'ı kullanın veya birfirebase.json
nasıl oluşturulduğunu göstereceğim.
Yeni bir projeyi başlatma
- Firebase CLI'da web çerçeveleri önizlemesini etkinleştirin:
firebase experiments:enable webframeworks
. KSA'dan başlatma komutunu çalıştırın, ardından istemleri uygulayın:
firebase init hosting
."Web çerçevesi kullanmak ister misiniz? (deneysel)"
Barındırma kaynak dizininizi seçin. Bu mevcut bir Next.js uygulamasıysa, CLI süreci tamamlanır ve sonraki bölüme geçebilirsiniz.
İstenirse Next.js'yi seçin.
Statik içerik yayınlama
Firebase'i başlattıktan sonra, standart dağıtım komutu:
firebase deploy
Dağıtılmış uygulamanızı görüntüleyebilirsiniz sitesinde yayınlar.
Dinamik içeriği önceden oluşturma
Firebase CLI, getStaticProps ve getStaticPaths yöntemlerine yer verin.
İsteğe bağlı: Firebase JS SDK ile entegrasyon
Firebase JS SDK yöntemlerini hem sunucu hem de istemci paketlerine eklerken
çalışma zamanı hatalarına karşı isSupported()
kontrol edin.
Tüm ürünler
tüm ortamlarda desteklenir.
İsteğe bağlı: Firebase Admin SDK ile entegrasyon
Yönetici SDK'sı paketleri, tarayıcı derlemenize dahil edilirse başarısız olur; bu kaynakları yalnızca getStaticProps içinde ve getStaticPaths yöntemlerine yer verin.
Tamamen dinamik içerik (SSR) sunma
Firebase CLI, getServerSideProps ifadelerini oluşturmak için kullanılır. Bu tür durumlarda CLI, dinamik çalıştırmak için işlevleri Firebase için Cloud Functions'a dağıtır. sunucu kodu yerine kullanılabilir. Bu işlevlerle ilgili alan adı ve çalışma zamanı gibi bilgileri görüntüleyebilirsiniz Firebase konsolunda bulabilirsiniz.
Hosting davranışını next.config.js
ile yapılandırın
Resim Optimizasyonu
Next.js Resim Optimizasyonu'nu Kullanma desteklenir ancak bir işlevin oluşturulmasını tetikler (Cloud Functions for Firebase'de) indirin.
Yönlendirmeler, Yeniden Yazmalar ve Üstbilgiler
Firebase CLI'ın
yönlendirmeler,
yeniden yazar ve
başlıklar şurada:
next.config.js
, bu kullanıcıları
Dağıtım sırasında ilgili eşdeğer Firebase Hosting yapılandırması.
Next.js yönlendirmesi, yeniden yazma işlemi veya üstbilgi eşdeğerine dönüştürülemez
Firebase Hosting üstbilgisini geri alır ve bir işlev oluşturur;
veya SSR'den yararlanmıyor.
İsteğe bağlı: Firebase Authentication ile entegrasyon
Web çerçevesine duyarlı Firebase dağıtım aracı, istemci ve sunucu durumunun çerezler kullanılarak senkronize edildiğini gösterir. Bu işlem için SSR'de kimlik doğrulama bağlamına erişmek için:
- Express
res.locals
nesnesi isteğe bağlı olarak, kimliği doğrulanmış Firebase uygulaması örneği (firebaseApp
) ve şu anda oturum açmış olan kullanıcı (currentUser
). Bu öğeyegetServerSideProps
üzerinden erişilebilir. - Kimliği doğrulanmış Firebase uygulaması adı, rota sorgusunda sağlanmış
(
__firebaseAppName
). Bu, bağlamdayken manuel entegrasyona olanak tanır:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);