O Firebase vai estar no Google I/O em 14 de maio! Inscreva-se agora.

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. A versão compatível mais recente do Next.js é 13.4.7.

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

Na CLI do Firebase, ative a visualização de frameworks da Web:
```
firebase experiments:enable webframeworks
```
Execute o comando de inicialização da CLI e siga as instruções:
```
firebase init hosting
```
Responda "Sim" para "Você quer usar uma estrutura da Web?" (experimental)
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.
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.

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 (em inglês). Nesses casos, a CLI vai implantar funções no Cloud Functions para 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 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 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);