Zintegruj Next.js

Korzystając z interfejsu wiersza polecenia Firebase, możesz wdrażać aplikacje internetowe Next.js w Firebase i udostępniać je za pomocą Firebase Hosting. Interfejs wiersza polecenia szanuje ustawienia Next.js i tłumaczy je na ustawienia Firebase przy zerowej lub minimalnej dodatkowej konfiguracji z Twojej strony. Jeśli Twoja aplikacja zawiera dynamiczną logikę po stronie serwera, interfejs wiersza polecenia wdraża tę logikę w Cloud Functions for Firebase. Najnowsza obsługiwana wersja Next.js to 13.4.7.

Zanim zaczniesz

Zanim zaczniesz wdrażać aplikację w Firebase, przejrzyj następujące wymagania i opcje:

  • Firebase CLI w wersji 12.1.0 lub nowszej. Pamiętaj, aby zainstalować interfejs CLI przy użyciu preferowanej metody.

  • Opcjonalnie: włączone rozliczenia w projekcie Firebase (wymagane, jeśli planujesz korzystać z SSR)

  • Opcjonalnie: użyj eksperymentalnej biblioteki ReactFire, aby skorzystać z jej funkcji przyjaznych Firebase

Zainicjuj Firebase

Aby rozpocząć, zainicjuj Firebase dla swojego projektu frameworkowego. Użyj interfejsu wiersza polecenia Firebase w przypadku nowego projektu lub zmodyfikuj firebase.json w przypadku istniejącego projektu.

Zainicjuj nowy projekt

  1. W interfejsie CLI Firebase włącz podgląd frameworków internetowych:
    firebase experiments:enable webframeworks

  2. Uruchom polecenie inicjowania z interfejsu CLI, a następnie postępuj zgodnie z instrukcjami:

    firebase init hosting

  3. Odpowiedz „tak” na pytanie „Czy chcesz używać platformy internetowej? (eksperymentalnie)”

  4. Wybierz katalog źródłowy hostingu. Jeśli jest to istniejąca aplikacja Next.js, proces interfejsu CLI zostanie zakończony i możesz przejść do następnej sekcji.

  5. Jeśli pojawi się monit, wybierz Next.js.

Podawaj treści statyczne

Po zainicjowaniu Firebase możesz udostępniać zawartość statyczną za pomocą standardowego polecenia wdrażania:

firebase deploy

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

Wstępnie renderuj zawartość dynamiczną

Interfejs wiersza polecenia Firebase wykryje użycie getStaticProps i getStaticPaths .

Opcjonalnie: zintegruj z pakietem SDK Firebase JS

Włączając metody Firebase JS SDK zarówno do pakietów serwera, jak i klienta, chroń się przed błędami w czasie wykonywania, sprawdzając isSupported() przed użyciem produktu. Nie wszystkie produkty są obsługiwane we wszystkich środowiskach .

Opcjonalnie: zintegruj z pakietem SDK administratora Firebase

Pakiety Admin SDK nie będą działać, jeśli zostaną uwzględnione w kompilacji przeglądarki; odwołuj się do nich tylko wewnątrz getStaticProps i getStaticPaths .

Udostępniaj w pełni dynamiczną treść (SSR)

Interfejs CLI Firebase wykryje użycie getServerSideProps . W takich przypadkach interfejs wiersza polecenia wdroży funkcje w Cloud Functions dla Firebase w celu uruchomienia dynamicznego kodu serwera. Informacje o tych funkcjach, takie jak konfiguracja domeny i środowiska wykonawczego, możesz wyświetlić w konsoli Firebase .

Skonfiguruj zachowanie hostingu za pomocą next.config.js

Optymalizacja obrazu

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

Przekierowania, przepisywania i nagłówki

Interfejs wiersza polecenia Firebase uwzględnia przekierowania , przepisywania i nagłówki w next.config.js , konwertując je do odpowiedniej konfiguracji Firebase Hosting w czasie wdrażania. Jeśli przekierowania, przepisania lub nagłówka Next.js nie można przekonwertować na równoważny nagłówek Firebase Hosting, następuje cofnięcie i zbudowanie funkcji — nawet jeśli nie korzystasz z optymalizacji obrazu ani SSR.

Opcjonalnie: zintegruj z uwierzytelnianiem Firebase

Narzędzia do wdrażania Firebase obsługujące platformę internetową automatycznie synchronizują stan klienta i serwera za pomocą plików cookie. Istnieje kilka metod dostępu do kontekstu uwierzytelniania w SSR:

  • Obiekt Express res.locals będzie opcjonalnie zawierać uwierzytelnioną instancję aplikacji Firebase ( firebaseApp ) i aktualnie zalogowanego użytkownika ( currentUser ). Dostęp do tego można uzyskać w getServerSideProps .
  • Uwierzytelniona nazwa aplikacji Firebase jest podana w zapytaniu trasy ( __firebaseAppName ). Pozwala to na ręczną integrację w kontekście:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);