Next.js'yi Entegre Et,Next.js'yi Entegre Et,Next.js'yi Entegre Et

Firebase CLI'yi kullanarak Next.js Web uygulamalarınızı Firebase'e dağıtabilir ve onlara Firebase Hosting ile hizmet verebilirsiniz. CLI, Next.js ayarlarınıza saygı duyar ve bunları sıfır veya minimum düzeyde ekstra yapılandırmayla Firebase ayarlarına dönüştürür. Uygulamanız dinamik sunucu tarafı mantığı içeriyorsa CLI bu mantığı Cloud Functions for Firebase'e dağıtır. Desteklenen en son Next.js sürümü 13.4.7'dir.

Sen başlamadan önce

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

Firebase CLI sürüm 12.1.0 veya üzeri. Tercih ettiğiniz yöntemi kullanarak CLI'yi yüklediğinizden emin olun.
İsteğe bağlı: Firebase projenizde faturalandırma etkinleştirildi (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şlat

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

Yeni bir proje başlatın

Firebase CLI'de web çerçeveleri önizlemesini etkinleştirin:
```
firebase experiments:enable webframeworks
```
CLI'den başlatma komutunu çalıştırın ve ardından istemleri izleyin:
```
firebase init hosting
```
"Bir web çerçevesi kullanmak istiyor musunuz? (deneysel)" sorusuna evet yanıtı verin.
Barındırma kaynak dizininizi seçin. Bu mevcut bir Next.js uygulamasıysa CLI işlemi tamamlanır ve sonraki bölüme geçebilirsiniz.
İ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ılayacaktır.

İsteğe bağlı: Firebase JS SDK'sıyla entegrasyon

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

İsteğe bağlı: Firebase Yönetici SDK'sıyla entegrasyon

Yönetici SDK paketleri, tarayıcı yapınıza dahil edilirse başarısız olur; bunlara yalnızca getStaticProps ve getStaticPaths içinde bakın.

Tamamen dinamik içerik sunun (SSR)

Firebase CLI, getServerSideProps kullanımını algılayacaktır. Bu gibi durumlarda CLI, dinamik sunucu kodunu çalıştırmak için işlevleri Cloud Functions for Firebase'e dağıtır. Bu işlevler hakkındaki bilgileri (ör. etki alanı ve çalışma zamanı yapılandırması) Firebase konsolunda görüntüleyebilirsiniz.

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

Görüntü Optimizasyonu

Next.js Görüntü Optimizasyonunun kullanılması desteklenir, ancak SSR kullanmıyor olsanız bile bir işlevin ( Firebase için Cloud Functions'ta ) oluşturulmasını tetikler.

Yönlendirmeler, Yeniden Yazmalar ve Başlıklar

Firebase CLI, next.config.js dosyasındaki yönlendirmelere , yeniden yazmalara ve başlıklara saygı göstererek bunları dağıtım sırasında ilgili eşdeğer Firebase Barındırma yapılandırmasına dönüştürür. Next.js yönlendirmesi, yeniden yazma veya üstbilgisi eşdeğer bir Firebase Hosting üstbilgisine dönüştürülemezse, görüntü optimizasyonu veya SSR kullanmıyor olsanız bile geri çekilir ve bir işlev oluşturur.

İsteğe bağlı: Firebase Authentication ile entegre edin

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

Express res.locals nesnesi isteğe bağlı olarak kimliği doğrulanmış bir Firebase Uygulaması örneğini ( firebaseApp ) ve şu anda oturum açmış olan kullanıcıyı ( currentUser ) içerecektir. Buna getServerSideProps adresinden erişilebilir.
Kimliği doğrulanmış Firebase Uygulaması adı, rota sorgusunda ( __firebaseAppName ) sağlanır. Bu, bağlamda manuel entegrasyona olanak tanır:

// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);