Are you developing a web app with SSR on Next.js or Angular? Check out the App Hosting preview to explore whether it might be a better solution for you than Firebase Hosting.

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

Zintegruj Next.js

Za pomocą wiersza poleceń Firebase możesz wdrożyć aplikacje internetowe Next.js w Firebase i obsługiwać je za pomocą Hostingu Firebase. Interfejs wiersza poleceń uwzględnia ustawienia Next.js i tłumaczy je na ustawienia Firebase bez konieczności dodatkowej konfiguracji po Twojej stronie. Jeśli aplikacja zawiera dynamiczną logikę po stronie serwera, interfejs wiersza poleceń wdraża ją w Cloud Functions dla Firebase. Najnowsza obsługiwana wersja Next.js to 13.4.7.

Zanim zaczniesz

Zanim rozpoczniesz wdrażanie aplikacji w Firebase, zapoznaj się z tymi wymaganiami i opcjami:

Interfejs wiersza poleceń Firebase w wersji 12.1.0 lub nowszej. Zainstaluj interfejs wiersza poleceń przy użyciu preferowanej metody.
Opcjonalnie: płatności włączone w projekcie Firebase (wymagane, jeśli zamierzasz używać SSR)
Opcjonalnie: użyj eksperymentalnej biblioteki ReactFire, aby korzystać z jej funkcji przyjaznych dla Firebase.

Zainicjuj Firebase

Aby rozpocząć, zainicjuj Firebase dla swojego projektu platformy. Użyj interfejsu wiersza poleceń Firebase w nowym projekcie lub zmodyfikuj firebase.json w istniejącym projekcie.

Zainicjuj nowy projekt

W interfejsie wiersza poleceń Firebase włącz podgląd platform 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 „Czy chcesz użyć platformy internetowej? (funkcja eksperymentalna)”
Wybierz źródłowy katalog hostingu. Jeśli jest to istniejąca aplikacja Next.js, proces interfejsu wiersza poleceń zostanie zakończony i możesz przejść do następnej sekcji.
Jeśli pojawi się taka prośba, wybierz Next.js.

Wyświetlanie treści statycznych

Po zainicjowaniu Firebase możesz wyświetlać zawartość statyczną za pomocą standardowego polecenia wdrożenia:

firebase deploy

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

Wstępne renderowanie treści dynamicznych

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

Opcjonalnie: integracja z pakietem SDK Firebase JS

Gdy uwzględniasz metody Firebase JS SDK w pakietach serwera i klienta, pamiętaj o błędach działania, sprawdzając plik isSupported() przed użyciem usługi. Nie wszystkie usługi są obsługiwane we wszystkich środowiskach.

Opcjonalnie: integracja z pakietem Firebase Admin SDK

Jeśli ten pakiet znajduje się w Twojej kompilacji przeglądarki, nie zadziałają żadne pakiety pakietu Admin SDK. Używaj ich tylko w atrybutach getStaticProps i getStaticPaths.

Wyświetlanie w pełni dynamicznej treści (SSR)

Interfejs wiersza poleceń Firebase wykryje użycie polecenia getServerSideProps. W takich przypadkach interfejs wiersza poleceń wdroży funkcje w Cloud Functions dla Firebase, aby uruchomić kod dynamicznego serwera. Informacje o tych funkcjach, na przykład ich domenę i konfigurację środowiska wykonawczego, znajdziesz w konsoli Firebase.

Skonfiguruj działanie Hostingu za pomocą `next.config.js`

Optymalizacja obrazu

Korzystanie z optymalizacji obrazu Next.js jest obsługiwane, ale aktywuje tworzenie funkcji (w Cloud Functions dla Firebase), nawet jeśli nie używasz SSR.

Przekierowania, przepisy i nagłówki

Interfejs wiersza poleceń Firebase respektuje przekierowania, przepisywanie i nagłówki w usłudze next.config.js, konwertując je na odpowiednią konfigurację Hostingu Firebase podczas wdrażania. Jeśli nie można przekonwertować przekierowania, przepisania ani nagłówka Next.js na odpowiedni nagłówek Hostingu Firebase, zostanie użyta zastąpiona funkcja i utworzy funkcję – nawet wtedy, gdy nie korzystasz z optymalizacji obrazów ani SSR.

Opcjonalnie: integracja z Uwierzytelnianiem Firebase

Narzędzia do wdrażania Firebase korzystające z platformy internetowej automatycznie synchronizują stan klienta i serwera za pomocą plików cookie. Istnieją pewne metody uzyskiwania dostępu do kontekstu uwierzytelniania w SSR:

Obiekt Express res.locals będzie opcjonalnie zawierać uwierzytelnioną instancję aplikacji Firebase (firebaseApp) i aktualnie zalogowanego użytkownika (currentUser). Dostęp do tych danych uzyskasz tutaj: getServerSideProps.
W zapytaniu dotyczącym trasy (__firebaseAppName) podana jest uwierzytelniona nazwa aplikacji Firebase. Pozwala to na ręczną integrację w kontekście:

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