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. 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 vai implantar essa lógica no Cloud Functions for Firebase. A versão compatível mais recente do Next.js é 13.4.7.

Observação: o Hosting com reconhecimento de framework é um pré-lançamento antecipado público. Isso significa que a funcionalidade pode ser alterada de maneira incompatível com versões anteriores. Uma prévia não está sujeita a SLAs ou políticas de descontinuação e pode receber limitações ou ficar sem suporte.

Atenção: para desenvolvedores que criam um app Next.js de pilha completa, é altamente recomendável recomendamos o Firebase App Hosting. Se você já usa o experimento de frameworks na CLI do Firebase, recomendar "formação" para App Hosting. Com o App Hosting, você terá uma solução unificada para gerenciar desde a CDN até a renderização do lado do servidor, além das melhorias no GitHub integração.

Antes de começar

Antes de começar a implantação do app no Firebase, confira os seguintes requisitos e opções:

• CLI do Firebase versão 12.1.0 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. Use a CLI do Firebase para um novo projeto ou modifique firebase.json para um projeto que já existe.

Inicializar um novo projeto

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. Responda "Sim" para "Você quer usar uma estrutura da Web?" (experimental)

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

5. Se necessário, 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.

Dica: use o ReactFire, que faz isso para você automaticamente.

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.

Observação: por isso, a otimização de imagens e os canais de visualização do Hosting não funcionam bem juntos.

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);