If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

Ta strona została przetłumaczona przez Cloud Translation API.

Zintegruj Next.js

Za pomocą interfejsu wiersza poleceń Firebase możesz wdrażać aplikacje internetowe Next.js w Firebase i obsługiwać je za pomocą Firebase Hosting. Interfejs wiersza poleceń respektuje ustawienia Next.js i przekształca je w ustawienia Firebase z minimalną konfiguracją. Jeśli aplikacja zawiera dynamiczną logikę po stronie serwera, interfejs wiersza poleceń wdraża tę logikę do Cloud Functions for Firebase. Najnowsza obsługiwana wersja Next.js to 13.4.7.

Zanim zaczniesz

Zanim zaczniesz wdrażać aplikację w Firebase, zapoznaj się z tymi wymaganiami i opcjami:

Firebase interfejs wiersza poleceń w wersji 12.1.0 lub nowszej, Pamiętaj, aby zainstalować interfejs wiersza poleceń, korzystając z preferowanej metody.
Opcjonalnie: włączone płatności w projekcie Firebase (wymagane, jeśli planujesz używać SSR)
Opcjonalnie: korzystaj z eksperymentalnej biblioteki ReactFire, aby korzystać z funkcji zgodnych z Firebase.

Inicjowanie Firebase

Aby rozpocząć, zainicjuj Firebase w projekcie frameworka. W przypadku nowego projektu użyj interfejsu wiersza poleceń Firebase, a w przypadku istniejącego projektu zmodyfikuj firebase.json.

Inicjowanie nowego projektu

W interfejsie wiersza poleceń Firebase włącz podgląd frameworków internetowych:
```
firebase experiments:enable webframeworks
```
Uruchom polecenie inicjowania w interfejsie wiersza poleceń, a potem postępuj zgodnie z instrukcjami:
```
firebase init hosting
```
Odpowiedz „tak” na pytanie „Czy chcesz używać sieciowej platformy programistycznej? (eksperymentalnie)”.
Wybierz katalog źródłowy hostowania. Jeśli jest to istniejąca aplikacja Next.js, proces wiersza poleceń zostanie zakończony i możesz przejść do następnej sekcji.
Jeśli pojawi się taka prośba, wybierz Next.js.

Udostępnianie treści statycznych

Po zainicjowaniu Firebase możesz wyświetlać treści statyczne za pomocą standardowego polecenia wdrożenia:

firebase deploy

Możesz wyświetlić wdrożone aplikacje na jej stronie.

Wstępne renderowanie zawartości dynamicznej

Interfejs wiersza poleceń Firebase wykryje użycie funkcji getStaticProps i getStaticPaths.

Opcjonalnie: zintegruj z pakietem Firebase JS SDK

Jeśli metody pakietu Firebase JS SDK są zawarte w pakietach serwera i klienta, zapobiegaj błędom czasu wykonywania, sprawdzając wartość isSupported() przed użyciem produktu. Nie wszystkie produkty są obsługiwane we wszystkich środowiskach.

Opcjonalnie: integracja z pakietem Firebase Admin SDK

Pakiety Admin SDK nie będą działać, jeśli zostaną uwzględnione w kompilacji przeglądarki. Odwołuj się do nich tylko w funkcjach getStaticProps i getStaticPaths.

wyświetlanie w pełni dynamicznej zawartości (SSR);

Interfejs wiersza poleceń Firebase wykryje użycie funkcji getServerSideProps. W takich przypadkach interfejs wiersza poleceń wdraża funkcje do Cloud Functions for Firebase, aby uruchomić dynamiczny kod serwera. Informacje o tych funkcjach, takie jak ich domena i konfiguracja środowiska uruchomieniowego, możesz wyświetlić w konsoli Firebase.

Konfigurowanie działania zasobu Hosting za pomocą zasobu `next.config.js`

Optymalizacja obrazu

Korzystanie z optymalizacji obrazów Next.js jest obsługiwane, ale spowoduje utworzenie funkcji (w Cloud Functions for Firebase), nawet jeśli nie używasz SSR.

Przekierowania, przekierowania z modyfikacją i nagłówki

Interfejs wiersza poleceń Firebase uwzględnia przekierowania, przepisania i nagłówki w next.config.js, konwertując je na odpowiednią konfigurację Firebase Hosting w momencie wdrożenia. Jeśli przekierowania, przekierowania zmodyfikowane lub nagłówek Next.js nie mogą zostać przekonwertowane na odpowiedni nagłówek Firebase Hosting, funkcja tworzy wersję zapasową – nawet jeśli nie używasz optymalizacji obrazów ani SSR.

Opcjonalnie: integracja z usługą Uwierzytelnianie Firebase

Narzędzie do wdrażania Firebase obsługujące framework internetowy automatycznie zsynchronizuje stan klienta i serwera za pomocą plików cookie. W SSR dostępne są następujące metody dostępu do kontekstu uwierzytelniania:

Obiekt Express res.locals może opcjonalnie zawierać uwierzytelnioną instancję aplikacji Firebase (firebaseApp) i obecnie zalogowanego użytkownika (currentUser). Informacje te można znaleźć w obiekcie getServerSideProps.
Nazwę uwierzytelnionej aplikacji Firebase podaje zapytanie dotyczące trasy (__firebaseAppName). Umożliwia to ręczną integrację w ramach kontekstu:

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