Integra Next.js

Utilizzando l'interfaccia a riga di comando di Firebase, puoi distribuire le tue app Web Next.js su Firebase e servirle con Firebase Hosting. L'interfaccia a riga di comando rispetta le tue impostazioni di Next.js e le traduce in impostazioni di Firebase con nessuna o minima configurazione extra da parte tua. Se la tua app include una logica lato server dinamica, l'interfaccia a riga di comando distribuisce tale logica a Cloud Functions per Firebase.

Prima di iniziare

Prima di iniziare a distribuire la tua app su Firebase, esamina i seguenti requisiti e opzioni:

• Firebase CLI versione 12.1.0 o successiva. Assicurati di installare la CLI utilizzando il tuo metodo preferito.

• Facoltativo: fatturazione abilitata sul tuo progetto Firebase (obbligatorio se prevedi di utilizzare SSR)

• Facoltativo: fatturazione abilitata sul tuo progetto Firebase (obbligatorio se prevedi di utilizzare SSR)

• Facoltativo: utilizza la libreria sperimentale ReactFire per beneficiare delle sue funzionalità compatibili con Firebase

Inizializza Firebase

Per iniziare, inizializza Firebase per il tuo progetto framework. Utilizza l'interfaccia a riga di comando di Firebase per un nuovo progetto o modifica firebase.json per un progetto esistente.

Inizializza un nuovo progetto

1. Nella CLI di Firebase, abilita l'anteprima dei framework web:

   firebase experiments:enable webframeworks

2. Eseguire il comando di inizializzazione dalla CLI e quindi seguire le istruzioni:

   firebase init hosting

3. Rispondi sì a "Vuoi usare un framework web? (sperimentale)"

4. 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.

5. Se richiesto, scegli Next.js.

Servi contenuti statici

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

firebase deploy

Puoi visualizzare la tua app distribuita sul suo sito live.

Eseguire il pre-rendering dei contenuti dinamici

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

Facoltativo: integrazione con l'SDK JS di Firebase

Quando includi i metodi SDK di 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: integrazione con Firebase Admin SDK

I pacchetti Admin SDK non funzioneranno se inclusi nella build del browser; farvi riferimento solo all'interno di getStaticProps e getStaticPaths .

Fornire contenuti completamente dinamici (SSR)

L'interfaccia a riga di comando di Firebase rileverà l'utilizzo di getServerSideProps .

Configura il comportamento di hosting con next.config.js

Ottimizzazione dell'immagine

L'utilizzo di Next.js Image Optimization è 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 di Firebase rispetta i reindirizzamenti , le riscritture e le intestazioni in next.config.js , convertendoli nella rispettiva configurazione di Firebase Hosting equivalente al momento della distribuzione. Se un reindirizzamento, una riscrittura o un'intestazione Next.js non può essere convertito in un'intestazione Firebase Hosting equivalente, esegue il fallback e crea una funzione, anche se non stai utilizzando l'ottimizzazione dell'immagine o SSR.

Facoltativo: integrazione con Firebase Authentication

Gli strumenti di distribuzione Firebase compatibili con il framework web manterranno 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 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 autenticato viene fornito nella query di route ( __firebaseAppName ). Ciò consente l'integrazione manuale mentre nel contesto:

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