Next.js'yi entegre etme

Firebase KSA'yı 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ı Firebase ayarlarına dönüştürür. Bu işlem için sizin tarafınızdan ek yapılandırma yapılması gerekmez veya çok az yapılandırma yapılması gerekir. Uygulamanızda dinamik sunucu tarafı mantığı varsa KSA bu mantığı Cloud Functions for Firebase'ya dağıtır.

Başlamadan önce

Uygulamanızı Firebase'e dağıtmaya başlamadan önce aşağıdaki koşulları ve seçenekleri inceleyin:

  • Firebase KSA 12.1.0 veya sonraki sürümleri. 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 kullanmayı planlıyorsanız gereklidir).

  • İsteğe bağlı: Firebase dostu özelliklerinden yararlanmak için deneysel ReactFire kitaplığını kullanın.

Firebase'i başlatma

Başlamak için çerçeve projenizde Firebase'i başlatın. Yeni bir proje için Firebase CLI'yı kullanın veya mevcut bir proje için firebase.json'ı değiştirin.

Yeni bir projeyi başlatma

  1. Firebase CLI'da web çerçeveleri önizlemesini etkinleştirin: 
    firebase experiments:enable webframeworks

  2. Başlatma komutunu CLI'dan çalıştırın ve istemleri uygulayın: 

    firebase init hosting

  3. "Web çerçevesi kullanmak istiyor musunuz?" sorusuna evet yanıtını verin. (deneysel)"

  4. Barındırma kaynağı dizininizi seçin. Bu mevcut bir Next.js uygulamasıysa CLI işlemi tamamlanır ve bir sonraki bölüme geçebilirsiniz.

  5. İstenirse Next.js'yi seçin.

Statik içerik sunma

Firebase'i başlattıktan sonra, standart dağıtım komutuyla statik içerik sunabilirsiniz:

firebase deploy

Dağıtılan uygulamanızı canlı sitesinde görüntüleyebilirsiniz.

Dinamik içeriği önceden oluşturma

Firebase CLI, getStaticProps ve getStaticPaths kullanımını algılar.

İsteğe bağlı: Firebase JS SDK ile entegrasyon

Firebase JS SDK yöntemlerini hem sunucu hem de istemci paketlerine dahil ederken ürünü kullanmadan önce isSupported() işaretini kontrol ederek çalışma zamanı hatalarına karşı koruma sağlayın. Tüm ürünler tüm ortamlarda desteklenmez.

İsteğe bağlı: Firebase Admin SDK ile entegrasyon

Tarayıcı derlemenize dahil edilen Admin SDK paketleri başarısız olur. Bu paketlere yalnızca getStaticProps ve getStaticPaths içinde başvurun.

Tamamen dinamik içerik yayınlama (SSR)

Firebase KSA, getServerSideProps kullanımını algılar. Bu gibi durumlarda CLI, dinamik sunucu kodu çalıştırmak için işlevleri Cloud Functions for Firebase'ya dağıtır. Bu işlevlerle ilgili alan ve çalışma zamanı yapılandırması gibi bilgileri Firebase konsolunda görüntüleyebilirsiniz.

Hosting davranışını next.config.js ile yapılandırma

Görüntü Optimizasyonu

Next.js Image Optimization'ın kullanılması desteklenir ancak SSR kullanmıyor olsanız bile bir işlevin (Cloud Functions for Firebase içinde) oluşturulmasını tetikler.

Yönlendirmeler, Yeniden Yazmalar ve Üstbilgiler

Firebase CLI, next.config.js içindeki yönlendirmelere, yeniden yazmalara ve üstbilgilere uyar ve bunları dağıtım sırasında ilgili eşdeğer Firebase Hosting yapılandırmasına dönüştürür. Bir Next.js yönlendirmesi, yeniden yazma veya başlığı eşdeğer bir Firebase Hosting başlığına dönüştürülemiyorsa yedek olarak işlev oluşturulur. Bu, resim optimizasyonu veya SSR kullanmıyor olsanız bile geçerlidir.

İsteğe bağlı: Firebase Authentication ile entegrasyon

Web çerçevesiyle uyumlu Firebase dağıtım aracı, ç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.locals nesnesi, isteğe bağlı olarak kimliği doğrulanmış bir Firebase App örneği (firebaseApp) ve şu anda oturum açmış kullanıcıyı (currentUser) içerir. Bu nesneye getServerSideProps içinde erişilebilir.
  • Kimliği doğrulanmış Firebase uygulaması adı, rota sorgusunda (__firebaseAppName) sağlanır. Bu, bağlam içinde manuel entegrasyona olanak tanır:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);