Next.js'yi entegre etme

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 sizin herhangi bir ek yapılandırma ya da çok az yapılandırma kullanarak bunları Firebase ayarlarına çevirir. Uygulamanız dinamik sunucu tarafı mantığı içeriyorsa CLI bu mantığı Firebase için Cloud Functions'a dağıtır. En son desteklenen Next.js sürümü 13.4.7'dir.

Başlamadan önce

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

  • Firebase CLI 12.1.0 veya üzeri sürümler. Tercih ettiğiniz yöntemi kullanarak KSA'yı yüklediğinizden emin olun.

  • İsteğe bağlı: Firebase projenizde faturalandırma etkinleştirilmiş (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

İlk olarak, çerçeve projeniz için Firebase'i başlatın. Yeni bir proje için Firebase CLI'yı kullanın veya mevcut bir proje için firebase.json öğesini değiştirin.

Yeni bir projeyi ilk kullanıma hazırlama

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

  2. KSA'dan başlatma komutunu çalıştırın ve istemleri takip edin: 

    firebase init hosting

  3. "Web çerçevesi kullanmak istiyor musunuz? (deneysel)"

  4. Barındırma kaynak dizininizi seçin. Mevcut bir Next.js uygulaması söz konusuysa KSA işlemi tamamlanır ve 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

Hem sunucu hem de istemci paketlerine Firebase JS SDK yöntemleri eklerken, ürünü kullanmadan önce isSupported() öğesini 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

Yönetici SDK'si paketleri, tarayıcı derlemenize dahil edilirse başarısız olur. Bunlara yalnızca getStaticProps ve getStaticPaths içinde bakın.

Tam dinamik içerik (SSR) sunun

Firebase CLI, getServerSideProps kullanımını algılar. Bu tür 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. alanları ve çalışma zamanı yapılandırması) Firebase konsolunda görüntüleyebilirsiniz.

next.config.js ile Barındırma davranışını yapılandırın

Resim Optimizasyonu

Next.js Resim Optimizasyonu'nun kullanılması desteklenir ancak SSR kullanmıyor olsanız bile işlev oluşturulmasını tetikler (Cloud Functions for Firebase'de).

Yönlendirmeler, Yeniden Yazmalar ve Üstbilgiler

Firebase CLI, next.config.js içindeki yönlendirmeleri, yeniden yazmaları ve üstbilgileri dikkate alarak bunları dağıtım sırasında eşdeğer Firebase Hosting yapılandırmasına dönüştürür. Bir Next.js yönlendirmesi, yeniden yazma veya üst bilgi eş değer bir Firebase Hosting başlığına dönüştürülemediği takdirde, görüntü optimizasyonu veya SSR kullanmasanız bile geri çekilir ve bir işlev oluşturur.

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

Web çerçevesine duyarlı Firebase dağıtım aracı, çerezleri kullanarak istemci ve sunucu durumunun otomatik olarak senkronize edilmesini sağlar. SSR'de kimlik doğrulama bağlamına erişmek için sunulan bazı yöntemler vardır:

  • Express res.locals nesnesi isteğe bağlı olarak kimliği doğrulanmış bir Firebase Uygulaması örneği (firebaseApp) ve şu anda oturum açmış olan kullanıcı (currentUser) içerir. Bu alana getServerSideProps üzerinden erişilebilir.
  • Kimliği doğrulanmış Firebase uygulama adı, rota sorgusunda (__firebaseAppName) sağlanır. Bu ad, bağlam içindeyken manuel entegrasyona olanak tanır:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);