If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

Questa pagina è stata tradotta dall'API Cloud Translation.

Integrare Next.js

Utilizzando la CLI Firebase, puoi eseguire il deployment delle tue app web Next.js su Firebase e servirle con Firebase Hosting. La CLI rispetta le impostazioni di Next.js e le traduce in impostazioni di Firebase con una configurazione aggiuntiva minima o nulla da parte tua. Se la tua app include una logica dinamica lato server, la CLI la implementa in Cloud Functions for Firebase.

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 la CLI utilizzando il tuo metodo preferito.
(Facoltativo) Fatturazione abilitata nel tuo progetto Firebase (obbligatorio se prevedi di utilizzare il rendering lato server)
(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 la CLI 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 dalla CLI e segui le istruzioni:
```
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 della CLI viene completato e puoi procedere alla sezione successiva.
Se richiesto, scegli Next.js.

Pubblicare contenuti statici

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

firebase deploy

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

Pre-rendering dei contenuti dinamici

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

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

Quando includi i metodi dell'SDK Firebase JS sia nei bundle server che in quelli 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 l'SDK Firebase Admin

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

Pubblicare contenuti completamente dinamici (SSR)

La CLI Firebase rileverà l'utilizzo di getServerSideProps. In questi casi, la CLI eseguirà il deployment delle funzioni su Cloud Functions for Firebase per eseguire codice server dinamico. Puoi visualizzare informazioni su queste funzioni, come la configurazione del dominio e del runtime, nella console Firebase.

Configurare 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 il rendering lato server.

Reindirizzamenti, riscritture e intestazioni

La CLI Firebase rispetta i reindirizzamenti, le riscritture e le intestazioni in next.config.js, convertendoli nella rispettiva configurazione Firebase Hosting equivalente al momento del deployment. Se un reindirizzamento, una riscrittura o un'intestazione Next.js non possono essere convertiti in un'intestazione Firebase Hosting equivalente, viene eseguito il fallback e viene creata una funzione, anche se non utilizzi l'ottimizzazione delle immagini o il rendering lato server.

(Facoltativo) Integrare con Firebase Authentication

Gli strumenti di deployment di Firebase compatibili con i framework web manterranno automaticamente sincronizzati lo stato del client e del server utilizzando i cookie. Esistono alcuni metodi forniti 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 attualmente connesso (currentUser). È possibile accedervi in getServerSideProps.
Il nome dell'app Firebase autenticata viene fornito nella query di route (__firebaseAppName). Ciò consente l'integrazione manuale nel contesto:

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