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 udostępniać je za pomocą Hostingu Firebase. Interfejs wiersza poleceń respektuje ustawienia Next.js przekłada je na ustawienia Firebase z zerową dodatkową konfiguracją lub z minimalną wymaganą konfiguracją. z Twojej strony. Jeśli aplikacja zawiera dynamiczną logikę po stronie serwera, interfejs wiersza poleceń wdraża, z 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. Upewnij się, że: zainstalować interfejs wiersza poleceń za pomocą wybranej metody.
Opcjonalnie: w projekcie Firebase włączono płatności (wymagane, jeśli zamierzasz używać SSR)
Opcjonalnie: użyj eksperymentalnej biblioteki ReactFire, by wykorzystać jej Funkcje zgodne 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, interfejs wiersza poleceń zostanie zakończony. 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ć treści statyczne, korzystając ze standardu polecenie wdrożenia:

firebase deploy

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

Renderowanie zawartości dynamicznej z wyprzedzeniem

Interfejs wiersza poleceń Firebase wykryje użycie getstaticProps, i getStaticPaths.

Opcjonalnie: integracja z pakietem Firebase JS SDK

Przy uwzględnianiu metod pakietu Firebase JS SDK w pakietach serwera i klienta uważaj, przed błędami podczas działania, sprawdzając isSupported() przed użyciem usługi. Nie wszystkie produkty są obsługiwana 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. powołuj się na nie tylko wewnątrz 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ć dynamiczne kod serwera. Możesz wyświetlać informacje o tych funkcjach, takie jak ich domena i czas działania konfiguracji w konsoli Firebase.

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

Optymalizacja obrazu

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

Przekierowania, przepisania i nagłówki

Interfejs wiersza poleceń Firebase uwzględnia przekierowania, przeredagowania, nagłówki w next.config.js, konwertując ich na odpowiednią konfigurację Hostingu Firebase w momencie wdrożenia. Jeśli Nie można przekonwertować przekierowania, przeredagowania ani nagłówka Next.js na odpowiednik nagłówek Hostingu Firebase, wraca i tworzy funkcję – nawet jeśli nie używają optymalizacji obrazów ani SSR.

Opcjonalnie: integracja z Uwierzytelnieniem Firebase

Narzędzia do wdrażania oparte na platformie internetowej Firebase automatycznie zachowują stan klienta i serwera jest zsynchronizowany za pomocą plików cookie. Dostępne są różne metody, dostępu do kontekstu uwierzytelniania w SSR:

Obiekt Express res.locals będzie opcjonalnie zawierać uwierzytelniony Instancja aplikacji Firebase (firebaseApp) i zalogowany obecnie użytkownik (currentUser). Możesz to zrobić w aplikacji getServerSideProps.
W zapytaniu dotyczącym trasy podana jest uwierzytelniona nazwa aplikacji Firebase (__firebaseAppName). Pozwala to na ręczną integrację w kontekście:

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