Zintegruj Next.js

Za pomocą interfejsu wiersza poleceń 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 wdrożenia:

firebase deploy

Jeśli Twoja aplikacja zawiera dynamiczną logikę po stronie serwera, interfejs wiersza poleceń wdroży tę logikę w Cloud Functions for Firebase. Wdrożoną aplikację możesz wyświetlić w jej witrynie.

Wstępne renderowanie treści dynamicznych

Wiersz poleceń Firebase wykryje użycie getStaticProps i getStaticPaths.

Opcjonalnie: integracja z pakietem Firebase JS SDK

Jeśli w pakietach serwera i klienta używasz metod pakietu Firebase JS SDK, zabezpiecz się przed błędami w czasie działania, sprawdzając isSupported() przed użyciem produktu. 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 getStaticProps i getStaticPaths.

Udostępnianie w pełni dynamicznych treści (SSR)

Wiersz poleceń Firebase wykryje użycie getServerSideProps. W takich przypadkach interfejs wiersza poleceń wdroży Funkcje w Cloud Functions for Firebase, aby uruchomić dynamiczny kod serwera. Informacje o tych funkcjach, takie jak ich domena i konfiguracja środowiska wykonawczego, możesz wyświetlić w konsoli Firebase.

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

Optymalizacja obrazu

Obsługiwana jest optymalizacja obrazu Next.js, ale spowoduje ona utworzenie funkcji (w Cloud Functions for Firebase), nawet jeśli nie używasz SSR.

Przekierowania, przepisywanie i nagłówki

Wiersz poleceń Firebase uwzględnia przekierowania, przepisywanie i nagłówki w next.config.js, przekształcając je w odpowiednie konfiguracje Firebase Hosting w czasie wdrożenia. Jeśli przekierowanie, przepisanie lub nagłówek Next.js nie może zostać przekonwertowany na odpowiedni Firebase Hosting nagłówek, wiersz poleceń powróci do poprzedniego stanu i utworzy funkcję – nawet jeśli nie używasz optymalizacji obrazu ani SSR.

Opcjonalnie: integracja z uwierzytelnianiem Firebase

Narzędzie do wdrażania Firebase z obsługą frameworków internetowych automatycznie synchronizuje 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 niego można uzyskać w getServerSideProps.
  • Uwierzytelniona nazwa aplikacji Firebase jest podawana 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);