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 convertit en paramètres Firebase sans aucune configuration supplémentaire, voire minimale, de votre part. 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 en version preview anticipée. Cela signifie que la fonctionnalité peut faire l'objet de modifications susceptibles d'affecter la compatibilité ascendante. Un aperçu n'est sujette à aucun contrat de niveau de service ni aucun règlement d'obsolescence ou aucune assistance.

Attention :Pour les développeurs qui créent une application Next.js full stack, nous vous recommandons vivement recommandez Firebase App Hosting. Si vous utilisez déjà le test des frameworks dans la CLI Firebase, recommandent « diplômés » à App Hosting Avec App Hosting, vous disposerez d'une solution unifiée à gérer du CDN au rendu côté serveur, ainsi que l'amélioration de GitHub intégration.

Avant de commencer

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

• Firebase CLI version 12.1.0 ou ultérieure Veillez à installer la CLI en utilisant votre méthode préférée.

• Facultatif: Facturation activée dans votre projet Firebase (obligatoire si vous prévoyez d'utiliser le rendu côté serveur)

• 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. Utilisez la CLI Firebase pour un nouveau projet ou modifiez firebase.json pour une 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 votre répertoire source d'hébergement. S'il s'agit d'une application Next.js existante, le processus de CLI est terminé et vous pouvez passer à la section suivante.

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

Diffuser du contenu statique

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

firebase deploy

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

Préaffichage 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 compatible avec tous les environnements.

Conseil :Pensez à utiliser ReactFire, automatiquement.

Facultatif: intégrer le SDK Firebase Admin

Les kits de SDK Admin échoueront s'ils sont inclus dans la version de votre navigateur. s’y référer uniquement dans getStaticProps et getStaticPaths.

Diffuser du contenu entièrement dynamique

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

Configurer le comportement de Hosting avec next.config.js

Optimisation d'images

Utiliser l'optimisation d'image Next.js est pris en charge, mais cela déclenchera la création d'une fonction (dans Cloud Functions for Firebase), même si vous n'utilisez pas le rendu côté serveur.

Remarque :Pour cette raison, l'optimisation d'image et les canaux d'aperçu Hosting ne sont pas compatibles interagissent bien ensemble.

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

La CLI Firebase respecte les redirections, réécriture en-têtes dans next.config.js, en les convertissant dans configuration Firebase Hosting équivalente respective au moment du déploiement. Si un La redirection, la réécriture ou l'en-tête Next.js ne peuvent pas être convertis en équivalents Firebase Hosting, il revient en arrière et crée une fonction, même si vous n'utilisent pas l'optimisation d'image ni le rendu côté serveur.

Facultatif: intégrer Firebase Authentication

Les outils de déploiement Firebase basés sur le framework Web les états du client et du serveur sont synchronisés à l'aide de cookies. Plusieurs méthodes sont proposées pour accéder au contexte d'authentification dans le rendu côté serveur:

• L'objet Express res.locals contiendra éventuellement un objet Instance d'application Firebase (firebaseApp) et utilisateur actuellement connecté (currentUser). Il est accessible 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);