Utilizzando l'interfaccia a riga di comando Firebase, puoi eseguire il deployment delle app web Next.js su Firebase e pubblicarle con Firebase Hosting. L'interfaccia a riga di comando rispetta le impostazioni di Next.js le converte in impostazioni di Firebase con nessuna configurazione aggiuntiva o minima attiva da parte tua. Se l'app include logica lato server dinamica, l'interfaccia a riga di comando esegue il deployment la logica a Cloud Functions for Firebase. L'ultima versione di Next.js supportata è la 13.4.7.
Prima di iniziare
Prima di iniziare a eseguire il deployment della tua app in Firebase, esamina i requisiti e le opzioni seguenti:
- Interfaccia a riga di comando di Firebase versione 12.1.0 o successive. Assicurati di installare la CLI utilizzando il metodo che preferisci.
(Facoltativo) Fatturazione abilitata nel progetto Firebase (obbligatorio se prevedi di utilizzare SSR)
(Facoltativo) Utilizza la libreria sperimentale ReactFire per usufruire dei suoi Funzionalità ottimizzate per Firebase
Inizializza Firebase
Per iniziare, inizializza Firebase per il tuo progetto di framework.
Utilizza l'interfaccia a riga di comando Firebase per un nuovo progetto o modifica firebase.json
per un
progetto esistente.
Inizializzare un nuovo progetto
- Nell'interfaccia a riga di comando Firebase, attiva l'anteprima dei framework web:
firebase experiments:enable webframeworks
Esegui il comando di inizializzazione dall'interfaccia a riga di comando, quindi segui i prompt:
firebase init hosting
Rispondi sì alla domanda "Vuoi utilizzare un framework web? (sperimentale)"
Scegli la directory di origine dell'hosting. Se si tratta di un'app Next.js esistente, il processo dell'interfaccia a riga di comando viene completato e puoi passare alla sezione successiva.
Se richiesto, scegli Next.js.
Pubblicare contenuti statici
Dopo l'inizializzazione di Firebase, puoi pubblicare contenuti statici con lo standard comando deployment:
firebase deploy
Puoi visualizzare l'app di cui hai eseguito il deployment sul suo sito pubblicato.
Pre-rendering dei contenuti dinamici
L'interfaccia a riga di comando Firebase rileverà l'utilizzo di getStaticProps e getStaticPaths.
Facoltativo: integrazione con l'SDK Firebase JS
Quando includi i metodi dell'SDK Firebase JS in bundle di server e client, fai attenzione
in base agli errori di runtime, controllando isSupported()
prima di utilizzare il prodotto.
Non tutti i prodotti
supportato in tutti gli ambienti.
(Facoltativo) Integrazione con l'SDK Firebase Admin
I bundle SDK Admin non funzioneranno se inclusi nella compilazione del browser. Fai riferimento a questi bundle solo all'interno di getStaticProps e getStaticPaths.
Pubblicazione di contenuti completamente dinamici (SSR)
L'interfaccia a riga di comando Firebase rileverà l'utilizzo di getServerSideProps. In questi casi, l'interfaccia a riga di comando eseguirà il deployment delle funzioni in Cloud Functions for Firebase per eseguire il codice del server. Puoi visualizzare informazioni su queste funzioni, ad esempio il dominio e la configurazione di runtime, nella Console Firebase.
Configura il comportamento di Hosting con next.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'interfaccia a riga di comando Firebase rispetta
i reindirizzamenti,
le riscritture e
le intestazioni in
next.config.js
, convertendoli nella corrispondente configurazione Firebase Hosting equivalente al momento del deployment. Se
Il reindirizzamento, la riscrittura o l'intestazione Next.js non possono essere convertiti in un equivalente
Firebase Hosting, esegue un recupero e crea una funzione, anche se
non utilizzano l'ottimizzazione delle immagini o SSR.
(Facoltativo) Eseguire l'integrazione con Firebase Authentication
Gli strumenti di deployment Firebase basati sul framework web mantengono automaticamente lo stato del client e del server sincronizzato tramite i cookie. Esistono alcuni metodi per accedere al contesto di autenticazione in SSR:
- L'oggetto Express
res.locals
conterrà facoltativamente un'istanza dell'app Firebase autenticata (firebaseApp
) e l'utente che ha eseguito l'accesso al momento (currentUser
). È possibile accedervi ingetServerSideProps
. - Nella query della route viene fornito il nome dell'app Firebase autenticato
(
__firebaseAppName
). Ciò consente l'integrazione manuale nel contesto:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);