NextJS con Firebase

Next.js es un framework basado en React para crear aplicaciones web reactivas que el servidor se encargará de renderizar, es decir, una aplicación web con arquitectura SSR (Server Side Rendering). Esta arquitectura nos facilita principalmente el manejo de SEO en aplicaciones web.

En este pequeño articulo vamos a aprender a crear un proyecto con NextJS y Firebase.

Para iniciar comenzaremos usando el CLI de NextJS para crear el proyecto:

npx create-next-app nextjs-firebase

Por medio de la terminal entramos al proyecto creado y ejecutamos el siguiente comando para correr nuestro proyecto:

npm run dev

Ahora dentro del navegador vas a la dirección http://localhost:3000/ y si todo va bien lograras ver algo como lo siguiente.

Proyecto Next.js

Enseguida vamos a instalar la dependencia firebase.

npm i firebase --save

Ahora creamos un proyecto firestore en Firebase con una colección y sus respectivos documentos, cada documento tendrá “avatar” y “username” como propiedades, lo puedes ver en la siguiente imagen.