Deployer Next.js sur Firebase

Pourquoi Deployer Next.js sur Firebase ?

Dans un monde où les applications web deviennent de plus en plus complexes, il est crucial d'avoir une solution fiable et performante pour déployer vos applications. Firebase, de Google, offre une plateforme complète pour le développement, la gestion et l'analyse des applications mobiles et Web. En combinant Next.js, un framework React pour applications serveur-rendered, avec Firebase, vous pouvez créer des applications sur mesure qui sont performantes, sécurisées et faciles à déployer.

Un cas d'utilisation concret serait une plateforme de gestion de contenu (CMS) simple et rapide. Avec Firebase Hosting, Next.js et Firebase Functions, vous pouvez créer un CMS où les utilisateurs peuvent publier du contenu en direct, tout en conservant un accès sécurisé et des performances optimales.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin de :

• Un compte Google
• Un projet Firebase
• Node.js (>= 14.0.0)
• npm ou yarn

Installez les outils nécessaires :

## Installer Node.js et npm
https://nodejs.org/en/download/

## Installer Firebase CLI
npm install -g firebase-tools

Concepts fondamentaux

Firebase Hosting

Firebase Hosting est un service qui vous permet de déployer des applications Web statiques, comme celles générées par Next.js. Il offre une mise en cache intelligente et une distribution mondiale pour une accélération optimale.

// Créer un fichier firebase.json pour configurer Firebase Hosting
{
  "public": "out",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

Firebase Functions

Firebase Functions vous permet de créer des fonctions backend dans le cloud. En combinant Next.js avec Firebase Functions, vous pouvez créer des API personnalisées et des fonctionnalités dynamiques.

// Créer une fonction Firebase pour générer du contenu statique
const functions = require('firebase-functions');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

exports.next = functions.https.onRequest((req, res) => {
  return app.prepare().then(() => handle(req, res));
});

Mise en pratique : projet fil rouge

Nous allons créer un simple gestionnaire de tâches en utilisant Next.js et Firebase.

Étape 1 : Initialiser le projet Next.js

## Créer un nouveau projet Next.js
npx create-next-app@latest task-manager
cd task-manager

Étape 2 : Configurer Firebase

## Connecter votre projet Firebase
firebase init

## Sélectionnez "Hosting" et "Functions"
## Suivez les instructions pour configurer le déploiement

Étape 3 : Créer l'interface utilisateur

Créez un fichier pages/index.js :

// pages/index.js
import { useState } from 'react';
import firebase from '../firebase.config';

const Home = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = async (e) => {
    e.preventDefault();
    if (!newTask.trim()) return;
    await firebase.firestore().collection('tasks').add({ text: newTask });
    setNewTask('');
    fetchTasks();
  };

  const fetchTasks = async () => {
    const snapshot = await firebase.firestore().collection('tasks').get();
    setTasks(snapshot.docs.map(doc => doc.data()));
  };

  return (
    <div>
      <h1>Task Manager</h1>
      <form onSubmit={addTask}>
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
        />
        <button type="submit">Add Task</button>
      </form>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task.text}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

Étape 4 : Configurer Firebase Firestore

## Créer une collection Firestore dans le portail Firebase

Étape 5 : Déployer l'application

## Installer les dépendances nécessaires
npm install firebase-admin

## Créer un fichier firebase.config.js pour configurer Firebase Admin SDK
import admin from 'firebase-admin';

if (!admin.apps.length) {
  admin.initializeApp();
}

export default admin;

Déployez votre application :

## Déployer sur Firebase Hosting
firebase deploy --only hosting

## Déployer les fonctions Firebase
firebase deploy --only functions

Erreurs frequentes et debugging

1. Erreur : "Failed to compile" avec Next.js

   # Code incorrect
   import { useState } from 'react';
   
   const Home = () => {
     const [tasks, setTasks] = useState([]);
     // ...
   };
   
   export default Home;
   bash
   # Commande pour compiler Next.js
   npm run dev
   

   Correction : Assurez-vous que vous avez toutes les dépendances nécessaires et que votre fichier firebase.json est correctement configuré.

2. Erreur : "Function failed on invocation" avec Firebase Functions

   # Code incorrect
   const functions = require('firebase-functions');
   const next = require('next');
   
   const dev = process.env.NODE_ENV !== 'production';
   const app = next({ dev });
   const handle = app.getRequestHandler();
   
   exports.next = functions.https.onRequest((req, res) => {
     return app.prepare().then(() => handle(req, res));
   });
   

   Correction : Assurez-vous que vous avez installé les dépendances nécessaires et que votre fichier firebase.json est correctement configuré.

3. Erreur : "Uncaught ReferenceError: process is not defined"

   # Code incorrect
   import admin from 'firebase-admin';
   
   if (!admin.apps.length) {
     admin.initializeApp();
   }
   
   export default admin;
   

   Correction : Utilisez process.env.NODE_ENV pour conditionner l'initialisation de Firebase Admin SDK.

Pour aller plus loin

1. Intégrer Firebase Authentication

   En utilisant Firebase Authentication, vous pouvez ajouter une sécurité accrue à votre application en permettant aux utilisateurs de se connecter avec des comptes Google, Facebook, etc.

2. Utiliser Firebase Realtime Database

   En remplaçant Firestore par Firebase Realtime Database, vous pouvez créer des applications réactives et en temps réel.

3. Déployer sur Google Cloud Run

   En utilisant Google Cloud Run, vous pouvez déployer vos fonctions Firebase comme des services serverless, ce qui permet une meilleure scalabilité et gestion des ressources.

Défi pratique : Créez une application de blog simple avec Next.js, Firebase Hosting et Firestore. Ajoutez les fonctionnalités suivantes :

• Authentification des utilisateurs
• Création d'articles
• Affichage de la liste des articles
• Mise à jour et suppression d'articles

Assurez-vous que votre application est bien structurée et qu'elle fonctionne correctement sur Firebase Hosting.