Firebase regresa a Google I/O el 14 de mayo. Regístrate ahora.

Integra Next.js

Con Firebase CLI, puedes implementar tus apps web de Next.js en Firebase y entregarlas con Firebase Hosting. La CLI admite la configuración de Next.js y la traduce a la configuración de Firebase sin ninguna configuración adicional o con una configuración mínima. Si tu app incluye una lógica dinámica en el servidor, la CLI implementa esa lógica en Cloud Functions para Firebase.

Antes de comenzar

Antes de comenzar a implementar tu app de Next.js en Firebase, revisa los siguientes requisitos y opciones:

Versión 11.14.2 o posterior de Firebase CLI. Asegúrate de instalar la CLI con el método que prefieras.
Opcional: Ten la facturación habilitada en tu proyecto de Firebase (obligatoria si planeas usar SSR)
Opcional: Usa la biblioteca experimental de ReactFire para aprovechar las funciones compatibles con Firebase

Inicializa Firebase

A fin de comenzar, inicializa Firebase para tu proyecto de framework.

En Firebase CLI, habilita la vista previa de frameworks web:
```
firebase experiments:enable webframeworks
```
Ejecuta el comando de inicialización desde la CLI y, luego, sigue las indicaciones:
```
firebase init hosting
```
Elige el directorio del código fuente de tu hosting. Si se trata de una app existente de Next.js, el proceso de la CLI se completa y puedes continuar con la siguiente sección.
Selecciona “Dynamic web hosting with web framework”.
Selecciona Next.js.

Entrega contenido estático

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

firebase deploy

Puedes ver la app implementada en su sitio.

Renderiza previamente el contenido dinámico

Firebase CLI detectará el uso de getStaticProps y getStaticPaths.

Realiza integraciones en el SDK de Firebase JS (opcional)

Cuando incluyas los métodos del SDK de Firebase JS en paquetes de clientes y de servidor, revisa isSupported() antes de usar el producto para protegerte de los errores del entorno de ejecución. No todos los productos son compatibles con todos los entornos.

Realiza integraciones en el SDK de Firebase Admin (opcional)

Los paquetes de SDK de Admin fallarán si se incluyen en la compilación de tu navegador. Consúltalos solo dentro de getStaticProps y getStaticPaths.

Entrega contenido completamente dinámico (SSR)

Firebase CLI detectará el uso de getServerSideProps.

Configura el comportamiento de Hosting con `next.config.js`

Optimización de las imágenes

Se admite usar la optimización de las imágenes de Next.js, pero esto hará que se cree una función (en Cloud Functions para Firebase) incluso si no usas SSR.

Redireccionamientos, reescrituras y encabezados

Firebase CLI admite los redireccionamientos, las reescrituras y los encabezados en next.config.js, y los convierte en su respectiva configuración equivalente de Firebase Hosting en el momento de la implementación. Si un redireccionamiento, reescritura o encabezado de Next.js no se puede convertir en un encabezado equivalente de Firebase Hosting, este se revierte y compila una función, incluso si no usas la optimización de imágenes o SSR.

Realiza la integración en Firebase Authentication (opcional)

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

El objeto res.locals de Express contendrá de manera opcional una instancia autenticada de la app de Firebase (firebaseApp) y el usuario que inició la sesión (currentUser). Se puede acceder a esta información en getServerSideProps.
El nombre autenticado de la app de Firebase 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);