← Back to Cooldecode
Lesson 9 · Next.js & deploy

Why use Vercel: the platform built around the framework

Vercel is the company that makes Next.js. That single fact explains most of what's good about deploying there — and most of what people warn you about.

1. What Vercel actually is

Vercel is a hosting and deployment platform for web applications. But describing it as "hosting" undersells it, because it isn't a server you rent and configure — it's a build-and-serve pipeline. You point it at a git repository; every time you push, it installs your dependencies, runs your build command, and takes the output apart into three different kinds of thing:

You never see a machine, never install a runtime, never configure a reverse proxy. The tradeoff is that you're accepting Vercel's opinions about how the pieces fit together — which brings us to the main reason people choose it.

2. The native-integration argument

Vercel employs the team that builds Next.js. When a new Next.js feature ships — a new caching primitive, a new rendering mode, a new middleware API — Vercel is the platform where it works on day one, because the feature and its hosting story were designed together.

Concretely, that means the four rendering strategies from the previous lesson need zero configuration on Vercel. When your build produces a mix of statically generated pages, ISR pages with a revalidate window, and dynamic SSR routes, Vercel reads the build output and wires each one to the right infrastructure automatically:

What your code doesWhat Vercel does with it
Static page, no dynamic dataCached HTML on the CDN, served with no compute
Page exporting revalidate = 60Cached HTML plus a background regeneration job on a 60s window
Route reading cookies/headersA serverless function invoked per request
middleware.tsEdge runtime, executed before the request reaches anything else
The real value here isn't speed, it's absence of work. Every other platform can host Next.js, but reproducing ISR's background regeneration or middleware's edge execution yourself means understanding Next.js's build manifest and building adapters. Vercel is the reference implementation.

3. The deploy workflow: preview URLs and git

The workflow is the part that changes how a team behaves, and it's worth understanding even if you never use Vercel specifically, because it's now the industry norm.

  1. You connect a git repository once.
  2. Every push to any branch triggers a build and produces a unique, live, shareable URL — a preview deployment. Not a local dev server, not a staging environment shared by five people: a real deployment of exactly that commit.
  3. A push to the production branch (usually main) triggers a production deployment to your real domain.
  4. If a production deploy is broken, you can promote a previous deployment back to production — an instant rollback, because old deployments aren't deleted, they're just no longer aliased to the production domain.

That last point is subtle and important. A Vercel deployment is immutable: it's a snapshot that keeps existing at its own URL forever. "Deploying to production" is really just repointing a domain alias at a different immutable snapshot. Rollback stops being a scary rebuild and becomes a pointer change.

Why preview URLs matter more than they sound like they should

Preview deployments turn code review into something a non-developer can participate in. A designer can click a link in a pull request and see the actual change, on a real URL, on their phone, without installing anything. Feedback moves from "can you screenshot it?" to "here, try it."

4. Edge functions and the edge network

"Edge" means running code in many small locations geographically near users, rather than in one big data centre. Vercel offers two flavours of server-side execution and the difference matters:

Serverless functions (Node runtime)Edge functions / middleware
Where they runOne chosen regionMany locations, near the user
RuntimeFull Node.jsRestricted, web-standard APIs only
Cold startNoticeable (tens/hundreds of ms)Near zero
Can talk toAny database driver, filesystem, native modulesHTTP/fetch only — no raw TCP database drivers
Good forReal work: DB queries, heavy rendering, third-party SDKsFast decisions: auth checks, redirects, A/B splits, geo/locale routing, rewriting headers

The classic edge use case is a decision that must happen before anything else, on every request, and must not add latency. Redirecting a logged-out visitor away from a private route is the textbook example:

// middleware.ts — runs at the edge, before the route renders
import { NextResponse } from 'next/server';

export function middleware(request) {
  const session = request.cookies.get('session');
  if (!session && request.nextUrl.pathname.startsWith('/account')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

export const config = { matcher: '/account/:path*' };

The trap: the edge runtime's restrictions are real. Reaching for an edge function and then discovering your Postgres client can't run there is a common early frustration. Edge is for cheap, fast, request-shaping logic — not for your data layer.

5. What else comes in the box

6. The honest downsides

A lesson that only lists advantages isn't teaching you anything. The real objections:

7. How it compares to the alternatives

OptionModelBest when
VercelFramework-native build pipeline, serverless + edgeNext.js app, small team, you want zero infra work
NetlifyVery similar model, framework-agnostic heritageStatic-heavy sites, non-Next frameworks (next lesson covers this properly)
Cloudflare Pages/WorkersEdge-first — everything runs at the edge by defaultLatency-critical, global audience, cost-sensitive at high traffic
A VPS (rented Linux box)You install and run everythingYou need full control, long-running processes, or predictable flat cost
AWS / GCP directlyRaw primitives you assemble yourselfLarge org, existing cloud footprint, compliance requirements
Static host (S3, GitHub Pages)Files only, no serverFully static output, cheapest possible option

A useful way to think about the spectrum: on the left, platforms sell you convenience and charge by usage; on the right, they sell you control and charge by capacity. Vercel is close to the far left.

8. A concrete example, start to finish

Say you're building a documentation site with a handful of dynamic pages. The whole lifecycle on Vercel looks like this:

# 1. Push a feature branch
git checkout -b feat/search
git push -u origin feat/search
# → Vercel builds it, comments a preview URL on the PR:
#   https://docs-git-feat-search-yourteam.vercel.app

# 2. Share that URL. Someone finds a bug. Push a fix.
#    Same branch, new commit, new preview URL. Old one still works.

# 3. Merge to main
# → production build, live on docs.example.com

# 4. Something's broken in production
#    Dashboard → previous deployment → "Promote to Production"
#    Live again in seconds. No rebuild.

Notice what never appears in that list: provisioning a server, installing Node, configuring a web server, setting up TLS, writing a deploy script, or arranging a rollback strategy. That elimination is the product.

9. When Vercel is the right call

Choose it when you're building a Next.js app, the team is small or has no dedicated infrastructure person, and traffic is moderate or predictable. The time you don't spend on deployment is worth more than the premium you pay per request.
Think twice when you have very high bandwidth traffic (metered pricing gets expensive fast), need long-running or stateful processes, or have compliance requirements that dictate where and how compute runs.

And the pragmatic middle path most projects actually take: start on Vercel because the friction is near zero, keep as much of the app as possible framework-standard rather than platform-specific, and revisit the decision when a real bill or a real technical wall gives you an actual reason to. Migrating a mostly-standard Next.js app off Vercel later is annoying but tractable; not shipping because you spent three weeks choosing infrastructure is worse.

Lição 9 · Next.js e deploy

Por que usar Vercel: a plataforma construída em volta do framework

A Vercel é a empresa que faz o Next.js. Esse único fato explica quase tudo que é bom em fazer deploy lá — e quase tudo que as pessoas te alertam.

1. O que a Vercel é, de fato

A Vercel é uma plataforma de hospedagem e deploy de aplicações web. Mas chamar de "hospedagem" é vender ela por menos, porque não é um servidor que você aluga e configura — é uma esteira de build-e-entrega. Você aponta ela pra um repositório git; a cada push, ela instala suas dependências, roda seu comando de build e desmonta o resultado em três tipos diferentes de coisa:

Você nunca vê uma máquina, nunca instala um runtime, nunca configura um proxy reverso. O preço é aceitar as opiniões da Vercel sobre como as peças se encaixam — o que nos leva ao motivo principal de as pessoas escolherem ela.

2. O argumento da integração nativa

A Vercel emprega o time que constrói o Next.js. Quando um recurso novo do Next.js sai — um novo primitivo de cache, um novo modo de renderização, uma nova API de middleware — a Vercel é a plataforma onde ele funciona no dia um, porque o recurso e a história de hospedagem dele foram desenhados juntos.

Na prática, isso significa que as quatro estratégias de renderização da lição anterior precisam de zero configuração na Vercel. Quando seu build produz uma mistura de páginas geradas estaticamente, páginas ISR com janela de revalidate e rotas SSR dinâmicas, a Vercel lê a saída do build e liga cada uma na infraestrutura certa automaticamente:

O que seu código fazO que a Vercel faz com isso
Página estática, sem dado dinâmicoHTML em cache na CDN, servido sem nenhuma computação
Página exportando revalidate = 60HTML em cache mais uma regeneração em background numa janela de 60s
Rota lendo cookies/headersUma função serverless invocada por requisição
middleware.tsRuntime de edge, executado antes da requisição chegar em qualquer outra coisa
O valor real aqui não é velocidade, é ausência de trabalho. Qualquer outra plataforma pode hospedar Next.js, mas reproduzir a regeneração em background do ISR ou a execução no edge do middleware por conta própria exige entender o manifesto de build do Next.js e construir adaptadores. A Vercel é a implementação de referência.

3. O fluxo de deploy: preview URLs e git

O fluxo é a parte que muda como um time se comporta, e vale entender mesmo que você nunca use a Vercel especificamente, porque hoje isso é a norma da indústria.

  1. Você conecta um repositório git uma vez.
  2. Todo push em qualquer branch dispara um build e produz uma URL única, ao vivo e compartilhável — um preview deployment. Não é um servidor de desenvolvimento local, nem um ambiente de staging compartilhado por cinco pessoas: é um deploy real exatamente daquele commit.
  3. Um push na branch de produção (normalmente main) dispara um deploy de produção no seu domínio real.
  4. Se um deploy de produção quebrou, você pode promover um deploy anterior de volta pra produção — um rollback instantâneo, porque deploys antigos não são apagados, só deixam de ter o domínio de produção apontado pra eles.

Esse último ponto é sutil e importante. Um deploy na Vercel é imutável: é um snapshot que continua existindo na própria URL pra sempre. "Fazer deploy em produção" é, na verdade, só reapontar um alias de domínio pra outro snapshot imutável. Rollback deixa de ser um rebuild assustador e vira uma mudança de ponteiro.

Por que preview URLs importam mais do que parece

Preview deployments transformam code review em algo em que quem não é desenvolvedor consegue participar. Uma pessoa de design clica num link no pull request e vê a mudança real, numa URL real, no celular, sem instalar nada. O feedback sai de "consegue mandar um print?" pra "toma, testa aí".

4. Edge functions e a rede de edge

"Edge" significa rodar código em muitos lugares pequenos geograficamente perto dos usuários, em vez de num único data center grande. A Vercel oferece dois sabores de execução no servidor, e a diferença importa:

Funções serverless (runtime Node)Edge functions / middleware
Onde rodamUma região escolhidaMuitos lugares, perto do usuário
RuntimeNode.js completoRestrito, só APIs padrão da web
Cold startPerceptível (dezenas/centenas de ms)Perto de zero
Consegue falar comQualquer driver de banco, sistema de arquivos, módulos nativosSó HTTP/fetch — sem drivers TCP de banco
Bom praTrabalho de verdade: queries no banco, renderização pesada, SDKs de terceirosDecisões rápidas: checagem de auth, redirects, testes A/B, roteamento por geo/idioma, reescrever headers

O caso de uso clássico de edge é uma decisão que precisa acontecer antes de tudo, em toda requisição, e não pode adicionar latência. Redirecionar um visitante deslogado pra fora de uma rota privada é o exemplo de manual:

// middleware.ts — roda no edge, antes da rota renderizar
import { NextResponse } from 'next/server';

export function middleware(request) {
  const session = request.cookies.get('session');
  if (!session && request.nextUrl.pathname.startsWith('/account')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

export const config = { matcher: '/account/:path*' };

A armadilha: as restrições do runtime de edge são reais. Escolher uma edge function e só depois descobrir que seu cliente de Postgres não roda lá é uma frustração comum no começo. Edge é pra lógica barata, rápida e de modelagem de requisição — não pra sua camada de dados.

5. O que mais vem na caixa

6. As desvantagens honestas

Uma lição que só lista vantagens não está te ensinando nada. As objeções reais:

7. Como se compara às alternativas

OpçãoModeloMelhor quando
VercelEsteira de build nativa do framework, serverless + edgeApp Next.js, time pequeno, você quer zero trabalho de infra
NetlifyModelo muito parecido, herança agnóstica de frameworkSites com muito conteúdo estático, frameworks que não são Next (a próxima lição cobre isso a fundo)
Cloudflare Pages/WorkersEdge-first — tudo roda no edge por padrãoLatência crítica, público global, sensibilidade a custo em tráfego alto
Uma VPS (máquina Linux alugada)Você instala e roda tudoVocê precisa de controle total, processos de longa duração ou custo fixo previsível
AWS / GCP diretoPrimitivos brutos que você monta sozinhoOrganização grande, presença de nuvem já existente, requisitos de compliance
Host estático (S3, GitHub Pages)Só arquivos, sem servidorSaída totalmente estática, opção mais barata possível

Uma forma útil de pensar no espectro: na esquerda, as plataformas te vendem conveniência e cobram por uso; na direita, te vendem controle e cobram por capacidade. A Vercel fica bem na ponta esquerda.

8. Um exemplo concreto, do início ao fim

Digamos que você está construindo um site de documentação com algumas páginas dinâmicas. O ciclo completo na Vercel é assim:

# 1. Push numa branch de feature
git checkout -b feat/search
git push -u origin feat/search
# → a Vercel builda e comenta uma preview URL no PR:
#   https://docs-git-feat-search-seutime.vercel.app

# 2. Compartilhe essa URL. Alguém acha um bug. Você corrige e dá push.
#    Mesma branch, commit novo, preview URL nova. A antiga continua funcionando.

# 3. Merge na main
# → build de produção, no ar em docs.exemplo.com

# 4. Algo quebrou em produção
#    Dashboard → deploy anterior → "Promote to Production"
#    No ar de novo em segundos. Sem rebuild.

Repare no que nunca aparece nessa lista: provisionar um servidor, instalar Node, configurar um servidor web, montar TLS, escrever um script de deploy ou organizar uma estratégia de rollback. Essa eliminação é o produto.

9. Quando a Vercel é a escolha certa

Escolha ela quando você está construindo um app Next.js, o time é pequeno ou não tem ninguém dedicado a infraestrutura, e o tráfego é moderado ou previsível. O tempo que você não gasta com deploy vale mais do que o prêmio que você paga por requisição.
Pense duas vezes quando você tem tráfego de banda muito alto (cobrança por uso encarece rápido), precisa de processos longos ou com estado, ou tem requisitos de compliance que ditam onde e como a computação roda.

E o caminho pragmático do meio, que a maioria dos projetos de fato segue: comece na Vercel porque o atrito é perto de zero, mantenha o máximo possível do app em padrões do framework em vez de específicos da plataforma, e revisite a decisão quando uma fatura real ou uma parede técnica real te der um motivo de verdade. Migrar um app Next.js majoritariamente padrão pra fora da Vercel depois é chato, mas resolvível; não lançar nada porque você passou três semanas escolhendo infraestrutura é pior.