If you are building server-rendered Angular or Next.js apps, check out next-generation Firebase App Hosting, a full-stack solution for modern web frameworks.

Cette page a été traduite par l'API Cloud Translation.

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 ou avec une configuration supplémentaire minimale de votre part. Si votre application inclut une logique dynamique côté serveur, la CLI déploie cette logique sur Cloud Functions for Firebase.

Avant de commencer

Avant de commencer à déployer votre application sur Firebase, passez en revue 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) La facturation est activée dans votre projet Firebase (obligatoire si vous prévoyez d'utiliser le rendu côté serveur).
Facultatif : utilisez la bibliothèque ReactFire expérimentale 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

Dans l'interface de ligne de commande Firebase, activez l'aperçu des frameworks Web :
```
firebase experiments:enable webframeworks
```
Exécutez la commande d'initialisation depuis la CLI, puis suivez les instructions :
```
firebase init hosting
```
Répondez "Oui" à la question "Do you want to use a web framework?" (Voulez-vous utiliser un framework Web ?). (version expérimentale)"
Choisissez le répertoire source de votre hébergement. S'il s'agit d'une application Next.js existante, le processus CLI se termine et vous pouvez passer à la section suivante.
Si vous y êtes invité, sélectionnez 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 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. Tous les produits ne sont pas pris en charge dans tous les environnements.

Facultatif : intégrer le SDK Admin Firebase

Les bundles SDK Admin échoueront s'ils sont inclus dans la compilation de votre 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 les fonctions sur Cloud Functions for Firebase pour exécuter le code serveur dynamique. Vous pouvez afficher des informations sur ces fonctions, comme leur domaine et leur configuration 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 acceptée, mais elle déclenchera la création d'une fonction (dans Cloud Functions for Firebase), même si vous n'utilisez pas SSR.

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 en 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 peuvent pas être convertis en en-tête Firebase Hosting équivalent, une fonction est créée par défaut, même si vous n'utilisez pas l'optimisation d'image ni le rendu côté serveur.

Facultatif : intégrer à Firebase Authentication

Les outils de déploiement Firebase compatibles avec les frameworks 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 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 route (__firebaseAppName). Cela permet une intégration manuelle dans le contexte :

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