Cómo usar Firebase en tu Proyecto Next.js

Stewart Granger Flores - 15 Noviembre, 2020

1.- Crear tu proyecto

Para poder utilizar Firestore/Firebase en tu proyecto de Next.js aprovecharemos la posibilidad de crear funciones Lambda de Next.js, pero vamos por paso. Lo primero que haremos será crear un proyecto de Firebase. Para crear una BD en Firestore tenemos que ir a la página de Firebase y hacer click en Ir a la consola en la esquina superior derecha y hacer click en Añadir Proyecto.

Cuando termines de seleccionar las necesidades de tu proyecto en cuanto a analíticas, pasaremos al dashboard de Firebase

1.1 Crear nuestra BD Firestore

Ahora iremos a Cloud Firestore, puedes llegar haciendo click en el menú izquierdo y comenzaremos a crear nuestra base de datos.

Nos saltará un mensaje dándonos a escoger entre Producción o Prueba y seleccionaremos uno

En lo personal, recomiendo partir como Producción pese a estar en un ambiente de test.

Crearemos la BD en el servidor más cercano a nosotros, en mi caso, SouthAmerica.

2.- Asociar una aplicación a nuestro proyecto Firebase

Para poder continuar, necesitamos asociar una aplicación a este proyecto. Para esto iremos a la configuración del proyecto haciendo click en la tuerca y clickeando Configuración.

Ahora en la configuración iremos a la pestaña Cuentas de servicio , donde nos entregarán las credenciales para ingresar y hacer uso de nuestra aplicación en Next.js haciendo click en Generar nueva clave privada

¿Qué es la clave privada?

Es un documento Json que nos entrega Firebase para poder configurar nuestra aplicación y conectarnos a Firestore desde nuestro proyecto Next.js.

Nota: Estos datos son PRIVADOS y deben ser tratados con cuidado. por lo que para hacer uso de ellos ocuparemos las variables de entorno que nos permite usar tanto el proyecto, como Vercel.

Cuando nos descargue el archivo veremos algo similar a esto 👇🏻

  
    {
        type: "",
        project_id: "",
        private_key_id: "",
        private_key:"",
        client_email:"",
        client_id: "",
        auth_uri: "",
        token_uri: "",
        auth_provider_x509_cert_url: "",
        client_x509_cert_url:"",
   }

De aquí es de donde obtendremos los valores de nuestras variables de entorno.

3.- Crear configuración Firebase

Ahora con las keys necesarias para configurar nuestro proyecto, crearemos un archivo en nuestra ruta raíz del proyecto llamado .env.local. Aquí escribiremos solamente los datos que necesitamos:


    FIREBASE_PROJECT_ID = "test-project"
    FIREBASE_CLIENT_EMAIL = "firebase-adminsdk-ejobd@test-project...eaccount.com"
    FIREBASE_PRIVATE_KEY = "-----BEGIN PRIVATE KEY-..."

Creados estos datos, podremos utilizarlos en nuestras funciones Lambda.

3.1.- Crear Configuración Firebase

Para poder usar esta configuración necesitamos instalar el paquete de NPM de firebase-admin, por lo que haremos


    npm install firebase-admin --save

Creamos una carpeta en la raíz del proyecto llamada lib y dentro de la carpeta lib creamos un archivo llamado firebase-admin.js

Acá dentro podemos pegar esta configuración base


    var admin = require("firebase-admin");

    try {
      admin.initializeApp({
        credential: admin.credential.cert({
          project_id: process.env.FIREBASE_PROJECT_ID,
          private_key: process.env.FIREBASE_PRIVATE_KEY,
          client_email: process.env.FIREBASE_CLIENT_EMAIL,
        }),
        databaseURL: "https://test-project.firebaseio.com",
      });
    } catch (error) {
      if (!/already exists/u.test(error.message)) {
        // eslint-disable-next-line no-console
        console.error("Firebase admin initialization error", error.stack);
      }
    }

    export default admin.firestore();

Nota: La databaseURL está en la ventana de cuentas de servicio que accedimos en el primer paso.

Listo :)

Ahora podremos usar en nuestros endpoint Lambda la base de datos que creamos en Firestore importando en nuestro entorno NodeJs de Next.js ubicado en /pages/api


    import db from "../../../lib/firebase-admin";