Integra Next.js

Con Firebase CLI, puedes implementar tus apps web de Next.js en Firebase y entregarlas con Firebase Hosting.

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

Si tu app incluye una lógica dinámica del servidor, la CLI implementa esa lógica en Cloud Functions for Firebase. 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 conjuntos de SDK de Admin fallarán si se incluyen en la compilación de tu navegador. Haz referencias a ellos solo dentro de getStaticProps y getStaticPaths.

Entrega contenido completamente dinámico (SSR)

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

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 for Firebase) incluso si no usas SSR.

Redireccionamientos, reescrituras y encabezados

La Firebase CLI respeta los redireccionamientos, las reescrituras y los encabezados en next.config.js, y los convierte en su 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);