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 wdrożyć aplikacje internetowe Next.js w Firebase i wyświetlać je w Hostingu Firebase. Interfejs wiersza poleceń uwzględnia ustawienia Next.js i przekształca je na ustawienia Firebase bez dodatkowej konfiguracji z Twojej strony lub bez konieczności ich dodatkowej konfiguracji. Jeśli aplikacja zawiera dynamiczną logikę po stronie serwera, interfejs wiersza poleceń wdraża tę logikę w Cloud Functions dla 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:

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

Zainicjuj Firebase

Zacznij od zainicjowania Firebase dla swojego projektu 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 wiersza poleceń Firebase włącz podgląd platform internetowych:
```
firebase experiments:enable webframeworks
```
Uruchom polecenie inicjowania w interfejsie wiersza poleceń, a następnie postępuj zgodnie z instrukcjami:
```
firebase init hosting
```
Odpowiedz „tak” na pytanie „Czy chcesz korzystać z platformy internetowej? (funkcja eksperymentalna)"
Wybierz katalog źródłowy hostingu. Jeśli jest to istniejąca aplikacja Next.js, proces interfejsu wiersza poleceń się zakończy 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 udostępniać treści statyczne za pomocą standardowego polecenia wdrożenia:

firebase deploy

Możesz wyświetlić wdrożoną aplikację w jej działającej witrynie.

Renderowanie zawartości dynamicznej z wyprzedzeniem

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

Opcjonalnie: integracja z pakietem Firebase JS SDK

Stosując metody pakietu Firebase JS SDK zarówno w pakietach serwera, jak i klienta, uważaj na błędy środowiska wykonawczego, sprawdzając przed użyciem usługi isSupported(). Nie wszystkie usługi są obsługiwane we wszystkich środowiskach.

Opcjonalnie: integracja z pakietem Firebase Admin SDK

Pakiety Admin SDK nie działają, jeśli są uwzględnione w kompilacji przeglądarki. Odwołuj się do nich tylko w metodach getStaticProps i getStaticPaths.

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

Interfejs wiersza poleceń Firebase wykryje użycie getServerSideProps. W takich przypadkach interfejs wiersza poleceń wdroży funkcje w Cloud Functions dla Firebase, aby uruchamiać kod dynamicznego serwera. Informacje o tych funkcjach, np. ich domenę i konfigurację środowiska wykonawczego, możesz przeglądać w konsoli Firebase.

Skonfiguruj zachowanie Hostingu za pomocą `next.config.js`

Optymalizacja obrazu

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

Przekierowania, przepisania i nagłówki

Interfejs wiersza poleceń Firebase respektuje przekierowania, przepisy i nagłówki w usłudze next.config.js i przekształca je w odpowiednią konfigurację Hostingu Firebase podczas wdrażania. Jeśli nie można przekonwertować przekierowania, przeredagowania ani nagłówka Next.js na odpowiadającego mu nagłówka Hostingu Firebase, narzędzie cofa się i tworzy funkcję, nawet jeśli nie korzystasz z optymalizacji obrazu ani z SSR.

Opcjonalnie: integracja z Uwierzytelnieniem Firebase

Zoptymalizowane przez platformę internetową narzędzia do wdrażania Firebase automatycznie synchronizują stan klienta i serwera za pomocą plików cookie. Oto kilka metod dostępu do kontekstu uwierzytelniania w SSR:

Obiekt Express res.locals będzie opcjonalnie zawierać uwierzytelnione wystąpienie aplikacji Firebase (firebaseApp) i aktualnie zalogowanego użytkownika (currentUser). Jest on dostępny na stronie getServerSideProps.
W zapytaniu dotyczącym trasy (__firebaseAppName) podawana 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);