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 o Firebase Hosting. A CLI respeita as configurações do Next.js e as converte em configurações do Firebase, e você não precisa configurar mais nada ou quase nada. Se o app incluir uma lógica dinâmica do lado do servidor, a CLI implantará essa lógica no Cloud Functions para Firebase.

Antes de começar

Antes de começar a implantação do seu app Next.js no Firebase, consulte os seguintes requisitos e opções:

  • CLI do Firebase versão 11.14.2 ou mais recente. Instale a CLI usando seu método preferido.
  • Opcional: ative o faturamento no seu projeto do Firebase (obrigatório se você planeja usar a SSR).
  • Opcional: use a biblioteca experimental ReactFire para aproveitar os recursos compatíveis com o Firebase

Inicializar o Firebase

Para começar, inicialize o Firebase para seu projeto de framework.

  1. Na CLI do Firebase, ative a visualização de frameworks da Web: 
    firebase experiments:enable webframeworks
  2. Execute o comando de inicialização da CLI e siga as instruções: 
    firebase init hosting
  3. Escolha o diretório de origem de hospedagem. Se for um app Next.js, o processo da CLI será concluído e você poderá passar para a próxima seção.
  4. Escolha "Hospedagem na Web dinâmica com framework da Web"
  5. Escolha Next.js.

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

É 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. Refira-se 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 (em inglês).

Configurar o comportamento do 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 para 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 (links em inglês) em next.config.js, convertendo-os para a configuração equivalente do 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 o usuário conectado (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);