Integrare Next.js

Utilizzando la CLI Firebase, puoi eseguire il deployment delle tue app web Next.js su Firebase e pubblicarle con Firebase Hosting.

Pubblicare contenuti statici

Dopo aver inizializzato Firebase, puoi pubblicare contenuti statici con il comando di deployment standard:

firebase deploy

Se la tua app include una logica dinamica lato server, l'interfaccia a riga di comando esegue il deployment di questa logica in Cloud Functions for Firebase. Puoi visualizzare l'app di cui è stato eseguito il deployment sul sito live.

Pre-rendering di contenuti dinamici

L'Firebase CLI rileverà l'utilizzo di getStaticProps e getStaticPaths.

(Facoltativo) Integrare con l'SDK Firebase JS

Quando includi i metodi dell'SDK Firebase JS nei bundle server e client, proteggiti dagli errori di runtime controllando isSupported() prima di utilizzare il prodotto. Non tutti i prodotti sono supportati in tutti gli ambienti.

(Facoltativo) Integrare con l'SDK Firebase Admin

I bundle dell'SDK Admin non verranno creati se inclusi nella build del browser. Fai riferimento a questi bundle solo all'interno di getStaticProps e getStaticPaths.

Erogare contenuti completamente dinamici (SSR)

L'Firebase CLI rileverà l'utilizzo di getServerSideProps. In questi casi, l'interfaccia a riga di comando esegue il deployment delle funzioni in Cloud Functions for Firebase per eseguire il codice server dinamico. Puoi visualizzare informazioni su queste funzioni, come il dominio e la configurazione di runtime, nella Console Firebase.

Configurare il comportamento con Hostingnext.config.js

Ottimizzazione delle immagini

L'utilizzo dell'ottimizzazione delle immagini di Next.js è supportato, ma attiverà la creazione di una funzione (in Cloud Functions for Firebase), anche se non utilizzi SSR.

Reindirizzamenti, riscritture e intestazioni

L'Firebase CLI rispetta reindirizzamenti, riscritture e intestazioni in next.config.js, convertendoli nella rispettiva configurazione equivalente Firebase Hosting al momento del deployment. Se un reindirizzamento, una riscrittura o un'intestazione di Next.js non può essere convertito in un'intestazione equivalente Firebase Hosting header, viene eseguito il fallback e viene creata una funzione, anche se non utilizzi l'ottimizzazione delle immagini o SSR.

(Facoltativo) Integrare con Firebase Authentication

Lo strumento di deployment di Firebase basato sul framework web manterrà automaticamente sincronizzati lo stato del client e del server utilizzando i cookie. Sono disponibili alcuni metodi per accedere al contesto di autenticazione in SSR:

  • L'oggetto res.locals di Express conterrà facoltativamente un'istanza dell'app Firebase autenticata (firebaseApp) e l'utente attualmente autenticato (currentUser). È possibile accedervi in getServerSideProps.
  • Il nome dell'app Firebase autenticata viene fornito nella query della route (__firebaseAppName). Ciò consente l'integrazione manuale nel contesto:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);