Integrare Next.js

Utilizzando l'interfaccia a riga di comando Firebase, puoi eseguire il deployment delle app web Next.js su Firebase e gestirle con Firebase Hosting. L'interfaccia a riga di comando rispetta le impostazioni di Next.js e le traduce in impostazioni di Firebase senza necessità di configurazione aggiuntiva o con configurazioni aggiuntive minime da parte tua. Se la tua app include logica lato server dinamica, l'interfaccia a riga di comando la esegue in Cloud Functions for Firebase. L'ultima versione di Next.js supportata è la 13.4.7.

Nota: Hosting sensibile al framework è un'anteprima pubblica. Ciò significa che la funzionalità potrebbe cambiare in modi non compatibili con le versioni precedenti. Una release di anteprima non è soggetta a SLA (accordo sul livello del servizio) o norme sul ritiro e potrebbe ricevere un supporto limitato o nullo.

Attenzione: per gli sviluppatori che creano un'app full-stack Next.js, consigliamo vivamente Firebase App Hosting. Se utilizzi già l'esperimento sui framework nell'interfaccia a riga di comando di Firebase, ti consigliamo di passare aApp Hosting. Con App Hosting, avrai una soluzione unificata per gestire tutto, dalla CDN al rendering lato server, oltre a un'integrazione migliorata di GitHub.

Prima di iniziare

Prima di iniziare a eseguire il deployment dell'app su Firebase, esamina i seguenti requisiti e opzioni:

• Firebase CLI versione 12.1.0 o successive. Assicurati di installare l'interfaccia a riga di comando utilizzando il metodo che preferisci.

• (Facoltativo) Fatturazione abilitata nel progetto Firebase (obbligatoria se prevedi di utilizzare SSR)

• (Facoltativo) Utilizza la libreria sperimentale ReactFire per usufruire delle sue funzionalità compatibili con Firebase

Inizializza Firebase

Per iniziare, inizializza Firebase per il progetto del 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

1. Nell'interfaccia a riga di comando Firebase, attiva l'anteprima dei framework web:

   firebase experiments:enable webframeworks

2. Esegui il comando di inizializzazione dall'interfaccia a riga di comando, quindi segui i prompt:

   firebase init hosting

3. Rispondi sì alla domanda "Vuoi utilizzare un framework web? (sperimentale)"

4. Scegli la directory di origine dell'hosting. Se si tratta di un'app Next.js esistente, la procedura dell'interfaccia a riga di comando viene completata e puoi passare alla sezione successiva.

5. Se richiesto, scegli Next.js.

Pubblicare contenuti statici

Dopo l'inizializzazione di Firebase, puoi pubblicare contenuti statici con il comando di deployment standard:

firebase deploy

Puoi visualizzare l'app di cui hai eseguito il deployment sul relativo sito pubblicato.

Pre-rendering dei contenuti dinamici

L'interfaccia a riga di comando Firebase rileverà l'utilizzo di getStaticProps e getStaticPaths.

(Facoltativo) Esegui l'integrazione con l'SDK Firebase JS

Quando includi i metodi dell'SDK Firebase JS nei bundle di 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.

Suggerimento: valuta la possibilità di utilizzare ReactFire, che lo fa automaticamente per te.

(Facoltativo) Esegui l'integrazione con l'SDK Firebase Admin

I bundle SDK Admin non riusciranno se vengono inclusi nella build del browser; fai riferimento a questi pacchetti solo all'interno di getStaticProps e getStaticPaths.

Pubblicare 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 codice dinamico del server. Puoi visualizzare le informazioni su queste funzioni, ad esempio la configurazione del dominio e del runtime, nella console di Firebase.

Configura il comportamento di Hosting con next.config.js

Ottimizzazione delle immagini

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

Nota: per questo motivo, l'ottimizzazione delle immagini e i canali di anteprima Hosting non interagiscono bene tra loro.

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 un reindirizzamento, una riscrittura o un'intestazione Next.js non può essere convertito in un'intestazione Firebase Hosting equivalente, viene utilizzato un valore predefinito e viene creata una funzione, anche se non utilizzi l'ottimizzazione delle immagini o l'SSR.

(Facoltativo) Eseguire l'integrazione con Firebase Authentication

Gli strumenti di deployment di Firebase che supportano il framework web manterranno automaticamente sincronizzato lo stato del client e del server utilizzando 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 in getServerSideProps.
• Il nome dell'app Firebase autenticato è fornito nella query della route (__firebaseAppName). Ciò consente l'integrazione manuale nel contesto:

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