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 Firebase możesz wdrażać aplikacje internetowe Next.js w Firebase i udostępniać je za pomocą Firebase Hosting. Wiersz poleceń uwzględnia ustawienia Next.js i przekształca je w ustawienia Firebase przy minimalnej konfiguracji z Twojej strony. Jeśli aplikacja zawiera dynamiczną logikę po stronie serwera, interfejs wiersza poleceń wdraża tę logikę w Cloud Functions for Firebase.

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ń wybraną metodą.
Opcjonalnie: włączone płatności w projekcie Firebase (wymagane, jeśli planujesz używać renderowania po stronie serwera)
Opcjonalnie: użyj eksperymentalnej biblioteki ReactFire, aby korzystać z jej funkcji dostosowanych do Firebase.

Inicjowanie Firebase

Aby rozpocząć, zainicjuj Firebase w projekcie platformy. Użyj interfejsu wiersza poleceń Firebase w przypadku nowego projektu lub zmodyfikuj firebase.json w przypadku istniejącego projektu.

Inicjowanie nowego projektu

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

Udostępnianie treści statycznych

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

firebase deploy

Możesz wyświetlić wdrożoną aplikację w jej aktywnej witrynie.

Wstępne renderowanie zawartości dynamicznej

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

Opcjonalnie: integracja z pakietem Firebase JS SDK

Jeśli w pakietach serwera i klienta umieszczasz metody pakietu Firebase JS SDK, zabezpiecz się przed błędami w czasie działania, sprawdzając isSupported() przed użyciem usługi. Nie wszystkie usługi 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.

Obsługa 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 w Cloud Functions for Firebase, aby uruchamiać dynamiczny kod serwera. Informacje o tych funkcjach, takie jak domena i konfiguracja środowiska wykonawczego, możesz wyświetlić w konsoli Firebase.

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

Optymalizacja obrazu

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

Przekierowania, przepisywanie i nagłówki

Interfejs Firebase CLI uwzględniaprzekierowania, przepisywanie i nagłówki w next.config.js, przekształcając je w odpowiednie konfiguracje Firebase Hosting podczas wdrażania. Jeśli przekierowanie, przepisanie lub nagłówek Next.js nie może zostać przekonwertowany na równoważny nagłówek Firebase Hosting, następuje powrót do funkcji i jej utworzenie – nawet jeśli nie używasz optymalizacji obrazów ani renderowania po stronie serwera.

Opcjonalnie: integracja z Uwierzytelnianiem Firebase

Narzędzia do wdrażania Firebase obsługujące platformy internetowe automatycznie synchronizują stan klienta i serwera za pomocą plików cookie. Dostęp do kontekstu uwierzytelniania w SSR można uzyskać za pomocą tych metod:

Obiekt Express res.locals może opcjonalnie zawierać uwierzytelnioną instancję aplikacji Firebase (firebaseApp) i aktualnie zalogowanego użytkownika (currentUser). Dostęp do tych informacji można uzyskać w getServerSideProps.
Nazwa uwierzytelnionej aplikacji Firebase jest podawana w zapytaniu o ścieżkę (__firebaseAppName). Umożliwia to ręczną integrację w kontekście:

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