Intégrer Next.js

Grâce à la Firebase CLI, vous pouvez déployer vos applications Web Next.js sur Firebase et les diffuser avec Firebase Hosting.

Remarque : L’hébergement compatible avec les frameworks Hosting est une version Preview publique. Cela signifie que la fonctionnalité peut faire l'objet de modifications susceptibles d'affecter la compatibilité ascendante. Une version Preview n'est soumise à aucun contrat de niveau de service ni à aucune règle d'obsolescence, et peut bénéficier d'une assistance limitée ou inexistante.

Attention : Pour les développeurs Next.js, la participation à l'expérience des Hosting frameworks d'hébergement a été définitivement fermée. Si vous utilisez déjà l'expérience 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 tous les aspects de votre application, du CDN au rendu côté serveur, ainsi qu'une meilleure intégration GitHub

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

Si votre application inclut une logique dynamique côté serveur, la CLI déploie cette logique dans Cloud Functions for Firebase. Vous pouvez afficher votre application déployée sur son site en direct.

Pré-rendre du contenu dynamique

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

Facultatif : intégrer le SDK Firebase JS

Lorsque vous incluez des méthodes du SDK Firebase JS 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 compatibles avec tous les environnements.

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

Facultatif : intégrer le SDK Admin Firebase

Les bundles du SDK Admin échoueront s'ils sont inclus dans votre build de navigateur. Ne les référez 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 afin d'exécuter du code serveur dynamique. Vous pouvez afficher des informations sur ces fonctions, telles que leur domaine et leur configuration d'exécution, dans la console Firebase.

Configurer le comportement avec Hostingnext.config.js

Optimisation des images

L'optimisation des images Next.js est compatible, mais elle déclenchera la création d'une fonction (dans Cloud Functions for Firebase), même si vous n'utilisez pas SSR.

Remarque : Pour cette raison, l'optimisation des images et les canaux Preview Hosting ne fonctionnent pas bien ensemble.

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

La CLI Firebase respecte les redirections, réécritures et les en-têtes dans next.config.js, en les convertissant en leur configuration Firebase Hosting équivalente au moment du déploiement. Si une redirection, une réécriture ou un en-tête Next.js ne peuvent pas être convertis en un en-tête équivalent Firebase Hosting, ils sont rétablis et créent une fonction, même si vous n'utilisez pas l'optimisation des images ni SSR.

Facultatif : intégrer Firebase Authentication

L'outil de déploiement Firebase compatible avec les frameworks Web synchronise automatiquement l'état du client et du serveur à l'aide de cookies. Plusieurs méthodes permettent d'accéder au contexte d'authentification dans SSR :

• L'objet Express res.locals contient é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 route (__firebaseAppName). Cela permet une intégration manuelle dans le contexte :

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