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 aplikacjigetServerSideProps
. - 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);