Intégrer Next.js

À l'aide de la CLI Firebase, vous pouvez déployer vos applications Web Next.js sur Firebase et les servir avec Firebase Hosting. La CLI respecte vos paramètres Next.js et les traduit en paramètres Firebase avec une configuration supplémentaire nulle ou minimale de votre part. Si votre application inclut une logique dynamique côté serveur, la CLI déploie cette logique sur Cloud Functions pour Firebase.

Remarque : L'hébergement compatible avec le framework est une version préliminaire publique. Cela signifie que la fonctionnalité peut changer de manière incompatible avec les versions antérieures. Une version préliminaire n'est soumise à aucun contrat de niveau de service ou politique d'obsolescence et peut bénéficier d'une assistance limitée ou inexistante.

Avant que tu commences

Avant de commencer à déployer votre application Next.js sur Firebase, examinez d'abord les exigences et les options suivantes :

• Firebase CLI version 11.14.2 ou ultérieure. Assurez-vous d' installer la CLI en utilisant votre méthode préférée.
• Facultatif : facturation activée sur votre projet Firebase (obligatoire si vous prévoyez d'utiliser SSR)
• Facultatif : utilisez la bibliothèque expérimentale ReactFire pour bénéficier de ses fonctionnalités compatibles avec Firebase

Initialiser Firebase

Pour commencer, initialisez Firebase pour votre projet de framework.

1. Dans la CLI Firebase, activez l'aperçu des frameworks Web :

   firebase experiments:enable webframeworks

2. Exécutez la commande d'initialisation à partir de la CLI, puis suivez les invites :

   firebase init hosting

3. Choisissez votre répertoire source d'hébergement. S'il s'agit d'une application Next.js existante, le processus CLI se termine et vous pouvez passer à la section suivante.
4. Choisissez "Hébergement web dynamique avec framework web"
5. Choisissez Suivant.js.

Servir du contenu statique

Après avoir initialisé Firebase, vous pouvez diffuser du contenu statique avec la commande de déploiement standard :

firebase deploy

Vous pouvez afficher votre application déployée sur son site en direct.

Pré-rendu du contenu dynamique

La CLI Firebase détectera l'utilisation de getStaticProps et getStaticPaths .

Facultatif : intégration avec le SDK Firebase JS

Lorsque vous incluez des méthodes Firebase JS SDK dans les bundles serveur et client, protégez-vous contre les erreurs d'exécution en vérifiant isSupported() avant d'utiliser le produit. Tous les produits ne sont pas pris en charge dans tous les environnements .

Astuce : pensez à utiliser ReactFire , qui le fait automatiquement pour vous.

Facultatif : intégration avec le SDK d'administration Firebase

Les bundles Admin SDK échoueront s'ils sont inclus dans la version de votre navigateur ; faites-y référence uniquement dans getStaticProps et getStaticPaths .

Diffusez du contenu entièrement dynamique (SSR)

La CLI Firebase détectera l'utilisation de getServerSideProps .

Configurer le comportement d'hébergement avec next.config.js

Optimisation des images

L'utilisation de Next.js Image Optimization est prise en charge, mais elle déclenchera la création d'une fonction (dans Cloud Functions pour Firebase ), même si vous n'utilisez pas SSR.

Remarque : pour cette raison, les canaux d'optimisation d'image et d'aperçu d'hébergement ne fonctionnent pas bien ensemble.

Redirections, réécritures et en-têtes

La CLI Firebase respecte les redirections , les réécritures et les en-têtes dans next.config.js , en les convertissant dans leur configuration Firebase Hosting équivalente respective au moment du déploiement. Si une redirection, une réécriture ou un en-tête Next.js ne peut pas être converti en un en-tête Firebase Hosting équivalent, il se replie et crée une fonction, même si vous n'utilisez pas l'optimisation d'image ou SSR.

Facultatif : intégrer à Firebase Authentication

L'outil de déploiement Firebase compatible avec le framework Web synchronisera automatiquement l'état du client et du serveur à l'aide de cookies. Certaines méthodes sont fournies pour accéder au contexte d'authentification dans SSR :

• L'objet Express res.locals contiendra éventuellement une instance Firebase App authentifiée ( firebaseApp ) et l'utilisateur actuellement connecté ( currentUser ). Ceci est accessible dans getServerSideProps .
• Le nom de l'application Firebase authentifiée est fourni dans la requête d'itinéraire ( __firebaseAppName ). Cela permet une intégration manuelle en contexte :

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