Zintegruj Next.js

Za pomocą interfejsu wiersza poleceń Firebase możesz wdrożyć w Firebase aplikacje internetowe Next.js i wyświetlać je przy użyciu Firebase Hosting. Interfejs wiersza poleceń respektuje ustawienia Next.js i przekształca je w ustawienia Firebase z minimalną konfiguracją. Jeśli aplikacja zawiera dynamiczną logikę po stronie serwera, interfejs wiersza poleceń wdraża tę logikę do Cloud Functions for Firebase. Najnowsza obsługiwana wersja Next.js to 13.4.7.

Uwaga: funkcja Hosting uwzględniająca framework jest we wczesnej wersji publicznej. Oznacza to, że funkcje mogą ulec zmianie w sposób powodujący brak zgodności wstecznej. Wersja w wersji testowej nie jest objęta żadną gwarancją jakości usług ani żadną zasadą wycofywania i może być obsługiwana w ograniczonym zakresie lub w ogóle nie być obsługiwana.

Uwaga: deweloperzy tworzący aplikacje Next.js obejmujące wszystkie warstwy powinni korzystać z hostingu aplikacji Firebase. Jeśli korzystasz już z eksperymentu dotyczącego frameworków w programie wiersza poleceń Firebase, zalecamy przejście na App Hosting. Dzięki App Hosting uzyskasz ujednolicone rozwiązanie do zarządzania wszystkimi aspektami – od CDN po renderowanie po stronie serwera – oraz ulepszoną integrację z GitHubem.

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. Pamiętaj, aby zainstalować interfejs wiersza poleceń, korzystając z preferowanej metody.

• Opcjonalnie: płatności włączone w projekcie Firebase (wymagane, jeśli planujesz używać SSR)

• Opcjonalnie: korzystaj z eksperymentalnej biblioteki ReactFire, aby korzystać z funkcji zgodnych z Firebase.

Inicjowanie Firebase

Aby rozpocząć, zainicjuj Firebase w projekcie frameworka. W przypadku nowego projektu użyj interfejsu wiersza poleceń Firebase, a w przypadku istniejącego projektu zmodyfikuj firebase.json.

Inicjowanie nowego projektu

1. W interfejsie wiersza poleceń Firebase włącz podgląd frameworków internetowych:

   firebase experiments:enable webframeworks

2. Uruchom polecenie inicjowania w interfejsie wiersza poleceń, a potem postępuj zgodnie z instrukcjami:

   firebase init hosting

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

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

5. Jeśli pojawi się taka prośba, wybierz Next.js.

Udostępnianie treści statycznych

Po zainicjowaniu Firebase możesz wyświetlać treści statyczne za pomocą standardowego polecenia wdrożenia:

firebase deploy

Możesz wyświetlić wdrożony zasób aplikacji na stronie internetowej.

Renderowanie zawartości dynamicznej z wyprzedzeniem

Interfejs wiersza poleceń Firebase wykryje użycie funkcji getStaticProps i getStaticPaths.

Opcjonalnie: zintegruj z pakietem Firebase JS SDK

Jeśli metody pakietu Firebase JS SDK są zawarte w pakietach serwera i klienta, zapobiegaj błędom czasu wykonywania, sprawdzając wartość isSupported() przed użyciem produktu. Nie wszystkie produkty są obsługiwane we wszystkich środowiskach.

Wskazówka: rozważ użycie ReactFire, który wykona to automatycznie.

Opcjonalnie: integracja z pakietem Firebase Admin SDK

Pakiety Admin SDK nie działają, jeśli są uwzględnione w kompilacji przeglądarki. Odwołuj się do nich tylko w metodach getstaticProps i getStaticPaths.

wyświetlanie 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 do Cloud Functions for Firebase, aby uruchomić dynamiczny kod serwera. Informacje o tych funkcjach, takie jak ich domena i konfiguracja czasu wykonywania, możesz wyświetlić w konsoli Firebase.

Skonfiguruj działanie Hosting za pomocą next.config.js

Optymalizacja obrazu

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

Uwaga: z tego powodu optymalizacja obrazu i Hosting kanały podglądu nie współpracują dobrze.

Przekierowania, przepisania i nagłówki

Interfejs wiersza poleceń Firebase respektuje przekierowania, przepisy i nagłówki w next.config.js, konwertując je na odpowiednią konfigurację Firebase Hosting podczas wdrażania. Jeśli przekierowania, przekierowania zmodyfikowane lub nagłówek Next.js nie mogą zostać przekonwertowane na odpowiedni nagłówek Firebase Hosting, funkcja tworzy wersję zapasową – nawet jeśli nie używasz optymalizacji obrazów ani SSR.

Opcjonalnie: integracja z usługą Uwierzytelnianie Firebase

Narzędzie do wdrażania Firebase obsługujące framework internetowy automatycznie zsynchronizuje stan klienta i serwera za pomocą plików cookie. Oto kilka metod dostępu do kontekstu uwierzytelniania w SSR:

• Obiekt Express res.locals może opcjonalnie zawierać uwierzytelnioną instancję aplikacji Firebase (firebaseApp) i obecnie zalogowanego użytkownika (currentUser). Informacje te można znaleźć w obiekcie getServerSideProps.
• W zapytaniu dotyczącym trasy (__firebaseAppName) podawana jest uwierzytelniona nazwa aplikacji Firebase. Pozwala to na ręczną integrację w kontekście:

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