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. La última versión compatible de Next.js es 13.4.7.

Nota: Hosting adaptado al framework es una versión preliminar pública anticipada. Por lo tanto, la funcionalidad puede cambiar de manera tal que deje de ser compatible con versiones anteriores. Una versión preliminar no está sujeta a ningún ANS ni a una política de baja, y puede que se ofrezca asistencia limitada o no se ofrezca asistencia para ella.

Precaución: Para los desarrolladores que crean una app Next.js de pila completa, recomendamos Firebase App Hosting. Si ya usas el experimento de frameworks en Firebase CLI, recomienda "graduarse" a Hosting de apps. Con App Hosting, tendrás una solución unificada para administrar desde la CDN hasta la renderización del servidor, además de una integración en GitHub mejorada.

Antes de comenzar

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

• Versión 12.1.0 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. Usa Firebase CLI para un proyecto nuevo o modifica firebase.json en un proyecto existente.

Inicializa un proyecto nuevo

1. En Firebase CLI, habilita la vista previa de frameworks web:

   firebase experiments:enable webframeworks

2. Ejecuta el comando de inicialización desde la CLI y, luego, sigue las indicaciones:

   firebase init hosting

3. Responde Sí a la pregunta “¿Quieres usar un framework web? (experimental)”

4. 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.

5. Si se te solicita, elige 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.

Sugerencia: Considera usar ReactFire, ya que lo hace automáticamente por ti.

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 para Firebase a fin de 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 para Firebase) incluso si no usas SSR.

Nota: Debido a esto, la optimización de imágenes y los canales de versión preliminar de Hosting no funcionan bien juntos.

Redireccionamientos, reescrituras y encabezados

Firebase CLI admite los redireccionamientos, las reescrituras y los headers 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);