Next.js'yi entegre etme

Firebase KSA'yı kullanarak Next.js web uygulamalarınızı Firebase'e dağıtabilir ve Firebase Hosting ile sunabilirsiniz.

Statik içerik sunma

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

firebase deploy

Uygulamanızda dinamik sunucu tarafı mantığı varsa KSA bu mantığı Cloud Functions for Firebase'ya dağıtır. 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() kontrolü yaparak ç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 sunma (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 saygı duyar 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);