Integrar Next.js

Usando a CLI do Firebase, você pode implantar seus aplicativos da Web Next.js no Firebase e servi-los com o Firebase Hosting. A CLI respeita suas configurações do Next.js e as traduz para as configurações do Firebase com nenhuma ou mínima configuração extra de sua parte. Se o seu aplicativo incluir lógica dinâmica do lado do servidor, a CLI implantará essa lógica no Cloud Functions for Firebase. A versão mais recente suportada do Next.js é 13.4.7.

Antes de você começar

Antes de começar a implantar seu aplicativo no Firebase, revise os seguintes requisitos e opções:

  • CLI do Firebase versão 12.1.0 ou posterior. Certifique-se de instalar a CLI usando seu método preferido.

  • Opcional: faturamento ativado no seu projeto do Firebase (obrigatório se você planeja usar SSR)

  • Opcional: use a biblioteca experimental ReactFire para se beneficiar de seus recursos compatíveis com Firebase

Inicializar Firebase

Para começar, inicialize o Firebase para seu projeto de estrutura. Use a Firebase CLI para um novo projeto ou modifique firebase.json para um projeto existente.

Inicialize um novo projeto

  1. Na CLI do Firebase, ative a visualização de estruturas da web:
    firebase experiments:enable webframeworks

  2. Execute o comando de inicialização na CLI e siga as instruções:

    firebase init hosting

  3. Responda sim para "Deseja usar um framework web? (experimental)"

  4. Escolha o diretório de origem da hospedagem. Se este for um aplicativo Next.js existente, o processo CLI será concluído e você poderá prosseguir para a próxima seção.

  5. Se solicitado, escolha Next.js.

Servir conteúdo estático

Depois de inicializar o Firebase, você pode fornecer conteúdo estático com o comando de implantação padrão:

firebase deploy

Você pode visualizar seu aplicativo implantado em seu site ativo.

Pré-renderizar conteúdo dinâmico

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

Opcional: integre com o SDK JS do Firebase

Ao incluir métodos Firebase JS SDK em pacotes de servidor e cliente, proteja-se contra erros de tempo de execução verificando isSupported() antes de usar o produto. Nem todos os produtos são suportados em todos os ambientes .

Opcional: integre com o SDK Admin do Firebase

Os pacotes Admin SDK falharão se forem incluídos na compilação do seu navegador; consulte-os apenas dentro de getStaticProps e getStaticPaths .

Servir conteúdo totalmente dinâmico (SSR)

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

Configure o comportamento de hospedagem com next.config.js

Otimização de imagem

O uso do Next.js Image Optimization é compatível, mas acionará a criação de uma função (no Cloud Functions para Firebase ), mesmo se você não estiver usando SSR.

Redirecionamentos, reescritas e cabeçalhos

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

Opcional: integre com o Firebase Authentication

As ferramentas de implantação do Firebase com reconhecimento de estrutura da web manterão automaticamente o estado do cliente e do servidor sincronizados usando cookies. Existem alguns métodos fornecidos para acessar o contexto de autenticação no SSR:

  • O objeto Express res.locals conterá opcionalmente uma instância autenticada do aplicativo Firebase ( firebaseApp ) e o usuário conectado no momento ( currentUser ). Isso pode ser acessado em getServerSideProps .
  • O nome autenticado do aplicativo 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);