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.

Udostępnianie treści statycznych

Po zainicjowaniu Firebase możesz udostępniać treści statyczne za pomocą standardowego polecenia wdrażania:

firebase deploy

Jeśli aplikacja zawiera dynamiczną logikę po stronie serwera, interfejs CLI wdraża tę logikę w Cloud Functions for Firebase. 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 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.

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ędnia przekierowania, 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, które rozpoznają 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 będzie opcjonalnie zawierać uwierzytelnioną instancję aplikacji Firebase (firebaseApp) i obecnie zalogowanego użytkownika (currentUser). Dostęp do tych informacji można uzyskać w getServerSideProps.
  • Nazwa uwierzytelnionej aplikacji Firebase jest podana w zapytaniu o trasę (__firebaseAppName). Umożliwia to ręczną integrację w kontekście:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);