Como hospedar Next.js em Server Mode gratuitamente com Firebase App Hosting

 

Você sabia que é possível hospedar seu projeto Next.js com suporte a SSR (Server-Side Rendering) de forma gratuita no Firebase? Neste post, vou te mostrar como fazer isso usando o Firebase App Hosting, a nova forma do Firebase hospedar apps fullstack com rotas server-side.

Pré-requisitos

Antes de começar, você precisa ter:

• Node.js instalado na máquina

• Conta no Firebase

• Firebase CLI (npm install -g firebase-tools)

• Projeto Next.js já criado

Quer aprender a criar e lançar seu próprio Micro-SaaS do zero?

Se você curte projetos práticos e quer ir além de tutoriais, conheça meu curso completo na Udemy! Nele, você vai:

• Criar um Micro-SaaS real (um jogo online multiplayer com sistema de login, partidas, e assinaturas via Stripe)

• Desenvolver frontend com React, Next.js e Tailwind

• Usar Firebase (Firestore, Auth, Realtime DB, Cloud Functions) para o backend

• Aprender SEO, marketing orgânico e pago (Google Ads e Instagram)

• Lançar o projeto com deploy contínuo e foco em resultados

O curso é 100% mão na massa e ideal para quem quer tirar uma ideia do papel e construir algo real, passo a passo.

Clique aqui para acessar na Udemy e veja as aulas gratuitas disponíveis!

Passo 1: Inicializar o Firebase

No terminal, dentro do seu projeto Next.js:

firebase init hosting

Escolha:

• "Use an existing project" ou crie um novo

• Tipo de app: "Web app"

• Configure como um App Hosting site (beta)

Passo 2: Instalar o adapter para Firebase

Instale o pacote necessário para adaptar o Next.js:

npm install --save firebase-tools firebase-functions npm install --save-dev @firebase/apphosting-adapter-next

Passo 3: Criar o adaptador

Na raiz do projeto, crie um arquivo firebase.adapter.ts:

import { createNextApp } from '@firebase/apphosting-adapter-next';                   export const app = createNextApp();

Passo 4: Atualizar o firebase.json

Adicione o seguinte ao seu firebase.json:

{   "hosting": {     "source": ".",     "rewrites": [       {         "function": "nextApp"                                                                                            }     ]   },   "functions": {     "source": ".",     "runtime": "nodejs18"   } }

Passo 5: Adicionar functions/index.ts

Crie o arquivo functions/index.ts com:

import { onRequest } from 'firebase-functions/v2/https';                                  import { app } from '../firebase.adapter'; export const nextApp = onRequest(app);

Passo 6: Deploy para o Firebase

Compile e faça o deploy com:

firebase deploy

Pronto!

Seu app Next.js com Server Side Rendering está agora hospedado gratuitamente no Firebase. Ideal para projetos pessoais, MVPs ou micro SaaS que precisam de SSR e funções backend!