Integrar o Next.js

Com a CLI do Firebase, é possível implantar apps do Next.js para a Web no Firebase e disponibilizá-los com Firebase Hosting.

Disponibilizar conteúdo estático

Depois de inicializar o Firebase, exiba conteúdos estáticos com o comando de implantação padrão:

firebase deploy

Se o app incluir uma lógica dinâmica do lado do servidor, a CLI vai implantar essa lógica no Cloud Functions for Firebase. É possível ver o app implantado no site ativo.

Pré-renderizar conteúdo dinâmico

A CLI do Firebase detectará o uso de getStaticProps e getStaticPaths.

Opcional: integrar com o SDK do Firebase para JavaScript

Ao incluir métodos do SDK do Firebase para JavaScript nos pacotes do servidor e do cliente, proteja contra os erros de execução verificando isSupported() antes de usar o produto. Nem todos os produtos são compatíveis com todos os ambientes.

Opcional: integrar com o SDK Admin do Firebase

Os pacotes do SDK Admin falharão se forem incluídos no build do navegador. É possível se referir a eles somente dentro de getStaticProps e getStaticPaths (links em inglês).

Exibir conteúdo totalmente dinâmico (SSR)

A CLI do Firebase detectará o uso de getServerSideProps. Nesses casos, a CLI vai implantar funções no Cloud Functions for Firebase para executar o código dinâmico do servidor. Você pode conferir as informações sobre essas funções, como a configuração do domínio e do ambiente de execução, no console do Firebase.

Configurar o comportamento de Hosting com next.config.js

Otimização de imagens

O uso da Otimização de imagens Next.js é compatível, mas ela acionará a criação de uma função (no Cloud Functions for Firebase), mesmo se você não usar SSR.

Redirecionamentos, substituições e cabeçalhos

A CLI do Firebase respeita redirecionamentos, substituições e cabeçalhos em next.config.js, convertendo-os para a configuração equivalente de Firebase Hosting no momento da implantação. Se um redirecionamento, substituição ou cabeçalho do Next.js não puder ser convertido em um cabeçalho equivalente do Firebase Hosting, ele usará uma função, mesmo se você não estiver usando otimização de imagens ou SSR.

Opcional: integrar com o Firebase Authentication

As ferramentas de implantação do Firebase com reconhecimento de framework da Web manterão automaticamente o estado do cliente e do servidor em sincronia usando cookies. Há alguns métodos para acessar o contexto de autenticação na SSR:

  • O objeto res.locals do Express pode conter uma instância autenticada do app Firebase (firebaseApp) e os usuários conectados (currentUser). Isso pode ser acessado em getServerSideProps.
  • O nome do app autenticado do Firebase é fornecido na consulta de rota (__firebaseAppName). Isso permite a integração manual no contexto:
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);