modelo-nextjs/README.md

Encurtador de links em Next.js

Um encurtador de links pronto para publicar na Dado: cole um link comprido, receba um endereço curto e acompanhe quantas vezes ele foi aberto.

Este repositório nasceu de um modelo da Dado. Cada git push na branch main publica uma versão nova do seu app, sozinho.

O que tem aqui

• app/page.tsx: a página (formulário, últimos links e "Sobre este deploy").
• app/Encurtador.tsx: a parte interativa da página (encurtar, copiar, lista).
• app/api/links/route.ts: a API — POST /api/links cria, GET /api/links lista.
• app/[codigo]/route.ts: a página de aviso GET /<código>, que mostra para onde o link leva.
• app/[codigo]/ir/route.ts: o redirecionamento GET /<código>/ir (302) e a contagem de cliques.
• lib/links.ts: onde os links ficam guardados (na memória).
• lib/paginas.ts: o HTML da página de aviso e da página de link que não existe.
• app/globals.css: o visual. Mude à vontade.

Não tem banco de dados: os links ficam na memória do app e somem quando ele é publicado de novo. Veja no fim como guardar de vez.

Rodar no seu computador

Precisa de Node.js 20.9 ou mais novo.

git clone https://git.dado.cloud/<sua-conta>/encurtador-nextjs.git
cd encurtador-nextjs
npm install
npm run dev

Abra http://localhost:3000.

Quando o git clone pedir usuário e senha, use o usuário da sua conta de Repositórios e, como senha, o token de Repositórios (no painel da Dado, em Repositórios). O comando certinho do seu app aparece no painel, em Deploys, na visão geral do app.

Mudar e publicar

Edite o que quiser e mande para a Dado:

git add .
git commit -m "Minha primeira mudança"
git push

O push na branch main publica uma versão nova. Dá para acompanhar o andamento em Deploys, no painel.

Variável de ambiente de exemplo

A mensagem em "Sobre este deploy" vem da variável MENSAGEM_BOAS_VINDAS. Para trocar, abra Deploys no painel, clique em "Variáveis de ambiente" no seu app, salve e publique de novo. No seu computador:

MENSAGEM_BOAS_VINDAS="Oi, mundo" npm run dev

API

# Encurtar
curl -X POST https://<endereço-do-seu-app>/api/links \
  -H 'Content-Type: application/json' \
  -d '{"url": "https://exemplo.com.br/uma-pagina"}'
# 201 {"codigo":"a1b2c3","url":"https://exemplo.com.br/uma-pagina","curto":"https://<endereço-do-seu-app>/a1b2c3","cliques":0,"criadoEm":"..."}

# Últimos 20 links
curl https://<endereço-do-seu-app>/api/links
# 200 {"links":[...]}

GET /<código> abre uma página de aviso com o endereço de destino e o botão "Continuar", que leva a GET /<código>/ir: ali o app soma um clique e redireciona (302) para o link original. O aviso existe porque o encurtador é público — sem ele, qualquer pessoa poderia usar o endereço do seu app para disfarçar um link de golpe. A API aceita chamadas de qualquer site (CORS aberto só em /api/*), então outro app seu pode usá-la. Para evitar abuso, cada IP cria no máximo 30 links a cada 10 minutos.

Guardar os links de vez

Para os links sobreviverem a uma nova publicação, ligue um Postgres no app (painel, em Deploys, aba "Banco de dados" do app). A conexão chega ao app na variável DATABASE_URL; aí é trocar o que está em lib/links.ts por consultas ao banco.