Integrar Next.js

Con Firebase CLI, puede implementar sus aplicaciones web Next.js en Firebase y ofrecerlas con Firebase Hosting. La CLI respeta la configuración de Next.js y la traduce a la configuración de Firebase con una configuración adicional mínima o nula de su parte. Si su aplicación incluye lógica dinámica del lado del servidor, la CLI implementa esa lógica en Cloud Functions para Firebase. La última versión compatible de Next.js es 13.4.7.

Antes de que empieces

Antes de comenzar a implementar tu aplicación en Firebase, revisa los siguientes requisitos y opciones:

  • Firebase CLI versión 12.1.0 o posterior. Asegúrese de instalar la CLI utilizando su método preferido.

  • Opcional: Facturación habilitada en tu proyecto de Firebase (obligatorio si planeas usar SSR)

  • Opcional: utilice la biblioteca experimental ReactFire para beneficiarse de sus funciones compatibles con Firebase

Inicializar base de fuego

Para comenzar, inicializa Firebase para tu proyecto marco. Utilice Firebase CLI para un proyecto nuevo o modifique firebase.json para un proyecto existente.

Inicializar un nuevo proyecto

  1. En Firebase CLI, habilite la vista previa de los marcos web:
    firebase experiments:enable webframeworks

  2. Ejecute el comando de inicialización desde la CLI y luego siga las indicaciones:

    firebase init hosting

  3. Responda sí a "¿Quiere utilizar un marco web? (experimental)"

  4. Elija su directorio de origen de alojamiento. Si se trata de una aplicación Next.js existente, el proceso CLI se completa y puede pasar a la siguiente sección.

  5. Si se le solicita, elija Next.js.

Servir contenido estático

Después de inicializar Firebase, puedes ofrecer contenido estático con el comando de implementación estándar:

firebase deploy

Puede ver su aplicación implementada en su sitio en vivo.

Contenido dinámico previo al renderizado

Firebase CLI detectará el uso de getStaticProps y getStaticPaths .

Opcional: integración con Firebase JS SDK

Al incluir métodos del SDK de Firebase JS en paquetes de servidor y de cliente, protéjase contra errores de tiempo de ejecución marcando isSupported() antes de usar el producto. No todos los productos son compatibles con todos los entornos .

Opcional: integrar con el SDK de administración de Firebase

Los paquetes de SDK de administración fallarán si se incluyen en la compilación de su navegador; consúltelos solo dentro de getStaticProps y getStaticPaths .

Ofrecer contenido totalmente dinámico (SSR)

Firebase CLI detectará el uso de getServerSideProps . En tales casos, la CLI implementará funciones en Cloud Functions para que Firebase ejecute código de servidor dinámico. Puedes ver información sobre estas funciones, como su dominio y configuración de tiempo de ejecución, en Firebase console .

Configurar el comportamiento del hosting con next.config.js

Optimización de imagen

Se admite el uso de Next.js Image Optimization , pero activará la creación de una función (en Cloud Functions para Firebase ), incluso si no estás usando SSR.

Redirecciones, reescrituras y encabezados

Firebase CLI respeta las redirecciones , reescrituras y encabezados en next.config.js y los convierte a su respectiva configuración equivalente de Firebase Hosting en el momento de la implementación. Si una redirección, reescritura o encabezado de Next.js no se puede convertir en un encabezado de Firebase Hosting equivalente, retrocede y crea una función, incluso si no estás usando optimización de imagen o SSR.

Opcional: integrar con Firebase Authentication

Las herramientas de implementación de Firebase compatibles con el marco web mantendrán sincronizados automáticamente el estado del cliente y del servidor mediante cookies. Se proporcionan algunos métodos para acceder al contexto de autenticación en SSR:

  • El objeto Express res.locals contendrá opcionalmente una instancia de Firebase App autenticada ( firebaseApp ) y el usuario actualmente registrado ( currentUser ). Se puede acceder a esto en getServerSideProps .
  • El nombre de la aplicación Firebase autenticada se proporciona en la consulta de ruta ( __firebaseAppName ). Esto permite la integración manual en contexto:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);