Intégrer Next.js

À l'aide de la CLI Firebase, vous pouvez déployer vos applications Web Next.js sur Firebase et les diffuser avec Firebase Hosting. La CLI respecte vos paramètres Next.js et les traduit en paramètres Firebase sans aucune configuration supplémentaire de votre part, ou avec un minimum de configuration. Si votre application inclut une logique côté serveur dynamique, la CLI la déploie sur Cloud Functions for Firebase. La dernière version de Next.js compatible est la version 13.4.7.

Remarque : Hosting compatible avec le framework est une version Preview publique anticipée. Cela signifie que la fonctionnalité peut faire l'objet de modifications susceptibles d'affecter la rétrocompatibilité. Une version preview n'est soumise à aucun contrat de niveau de service ni à aucune règle d'abandon, et peut bénéficier d'une assistance limitée ou nulle.

Attention : Pour les développeurs qui créent une application Next.js full stack, nous recommandons vivement Firebase App Hosting. Si vous utilisez déjà le test des frameworks dans la CLI Firebase, nous vous recommandons de passer à App Hosting. Avec App Hosting, vous disposez d'une solution unifiée pour gérer tout, du CDN au rendu côté serveur, ainsi qu'une meilleure intégration de GitHub.

Avant de commencer

Avant de commencer à déployer votre application sur Firebase, consultez les exigences et les options suivantes :

• Firebase CLI version 12.1.0 ou ultérieure Veillez à installer la CLI en utilisant la méthode de votre choix.

• Facultatif : Facturation activée dans votre projet Firebase (obligatoire si vous prévoyez d'utiliser le SSR)

• Facultatif : utilisez la bibliothèque expérimentale ReactFire pour profiter de ses fonctionnalités compatibles avec Firebase

Initialiser Firebase

Pour commencer, initialisez Firebase pour votre projet de framework. Utilisez la CLI Firebase pour un nouveau projet ou modifiez firebase.json pour un projet existant.

Initialiser un nouveau projet

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 instructions:

   firebase init hosting

3. Répondez "Oui" à la question "Voulez-vous utiliser un framework Web ? (expérimental)"

4. Choisissez le répertoire source d'hébergement. S'il s'agit d'une application Next.js existante, le processus de CLI se termine et vous pouvez passer à la section suivante.

5. Si vous y êtes invité, choisissez Next.js.

Diffuser du contenu statique

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

firebase deploy

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

Prérendre du contenu dynamique

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

Facultatif: intégrer le SDK JS Firebase

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

Conseil : Envisagez d'utiliser ReactFire, qui effectue cette opération automatiquement.

Facultatif : Intégration au SDK Firebase Admin

Les bundles du SDK Admin échoueront s'ils sont inclus dans votre build du navigateur. Ne les référencez que dans getStaticProps et getStaticPaths.

Diffuser du contenu entièrement dynamique (SSR)

La CLI Firebase détecte l'utilisation de getServerSideProps. Dans ce cas, la CLI déploie des fonctions dans Cloud Functions for Firebase pour exécuter du code serveur dynamique. Vous pouvez afficher des informations sur ces fonctions, telles que la configuration du domaine et de l'environnement d'exécution, dans la console Firebase.

Configurer le comportement de Hosting avec next.config.js

Optimisation des images

L'utilisation de l'optimisation des images Next.js est prise en charge, mais elle déclenche la création d'une fonction (dans Cloud Functions for Firebase), même si vous n'utilisez pas SSR.

Remarque : Par conséquent, l'optimisation des images et les canaux d'aperçu Hosting ne sont pas compatibles.

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, les convertissant en configuration Firebase Hosting équivalente respective au moment du déploiement. Si une redirection, une réécriture ou un en-tête Next.js ne peuvent pas être convertis en en-tête Firebase Hosting équivalent, il revient à la valeur par défaut et crée une fonction, même si vous n'utilisez pas d'optimisation d'image ni de SSR.

Facultatif : Intégrer à Firebase Authentication

Les outils de déploiement Firebase compatibles avec le framework Web synchronisent 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 le SSR :

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

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