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 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

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

  2. KSA'dan başlatma komutunu çalıştırın, ardından istemleri uygulayın: 

    firebase init hosting
    .

  3. "Web çerçevesi kullanmak ister misiniz? (deneysel)"

  4. 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.

  5. İ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 öğeye getServerSideProps ü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);