Integra Next.js

Utilizzando la CLI Firebase, puoi distribuire le tue app Web Next.js su Firebase e fornirle con Firebase Hosting. La CLI rispetta le tue impostazioni Next.js e le traduce in impostazioni Firebase con zero o una minima configurazione aggiuntiva da parte tua. Se la tua app include logica lato server dinamica, la CLI distribuisce tale logica a Cloud Functions for Firebase. L'ultima versione supportata di Next.js è la 13.4.7.

Prima di iniziare

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

  • CLI Firebase 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: 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 la CLI Firebase per un nuovo progetto o modifica firebase.json per un progetto esistente.

Inizializzare 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 utilizzare un framework web? (sperimentale)"

  4. Scegli la directory di origine del tuo hosting. Se si tratta di un'app Next.js esistente, il processo CLI viene completato e puoi procedere alla sezione successiva.

  5. Se richiesto, scegli Next.js.

Offri contenuto statico

Dopo aver inizializzato Firebase, puoi fornire contenuto statico con il comando di distribuzione standard:

firebase deploy

Puoi visualizzare l'app distribuita sul suo sito live.

Pre-renderizzare il contenuto dinamico

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

Facoltativo: integrazione con Firebase JS SDK

Quando includi i metodi Firebase JS SDK sia nei bundle server che 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 bundle SDK di amministrazione non funzioneranno se inclusi nella build del browser; fare riferimento ad essi solo all'interno di getStaticProps e getStaticPaths .

Offrire contenuti completamente dinamici (SSR)

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

Configura il comportamento dell'hosting con next.config.js

Ottimizzazione delle immagini

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

Reindirizzamenti, riscritture e intestazioni

La CLI Firebase rispetta i reindirizzamenti , le riscritture e le intestazioni in next.config.js , convertendoli nella rispettiva configurazione di hosting Firebase 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, torna indietro e crea una funzione, anche se non stai utilizzando l'ottimizzazione dell'immagine o SSR.

Facoltativo: integrazione con l'autenticazione Firebase

Gli strumenti di distribuzione Firebase compatibili con il framework Web manterranno automaticamente sincronizzati lo stato del client e del server utilizzando i cookie. Sono previsti alcuni metodi per accedere al contesto di autenticazione in SSR:

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