Modelo do encurtador em Next.js

Gerado a partir de deploy-templates/nextjs (dado.cloud 4c2a882).
2026-10-21 12:26:50 +00:00
commit b0ba007020
14 changed files with 2069 additions and 0 deletions
@@ -0,0 +1,139 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+
+import type { LinkJson } from '@/lib/links';
+
+const semProtocolo = (url: string) => url.replace(/^https?:\/\//, '');
+
+export default function Encurtador({ linksIniciais }: { linksIniciais: LinkJson[] }) {
+  const [url, setUrl] = useState('');
+  const [enviando, setEnviando] = useState(false);
+  const [erro, setErro] = useState<string | null>(null);
+  const [criado, setCriado] = useState<LinkJson | null>(null);
+  const [copiado, setCopiado] = useState(false);
+  const [links, setLinks] = useState(linksIniciais);
+
+  const carregarLinks = useCallback(async () => {
+    try {
+      const resposta = await fetch('/api/links', { cache: 'no-store' });
+      if (resposta.ok) setLinks(((await resposta.json()) as { links: LinkJson[] }).links);
+    } catch {
+      // Sem rede: a lista fica como estava.
+    }
+  }, []);
+
+  // Voltou para a aba depois de testar um link? Atualiza a contagem de cliques.
+  useEffect(() => {
+    const aoVoltar = () => {
+      if (document.visibilityState === 'visible') void carregarLinks();
+    };
+    document.addEventListener('visibilitychange', aoVoltar);
+    return () => document.removeEventListener('visibilitychange', aoVoltar);
+  }, [carregarLinks]);
+
+  async function encurtar(evento: React.FormEvent<HTMLFormElement>) {
+    evento.preventDefault();
+    setErro(null);
+    let alvo = url.trim();
+    if (!alvo) return setErro('Cole um link para encurtar.');
+    // Quem digita "exemplo.com.br" quer dizer https://exemplo.com.br.
+    if (!/^[a-z][a-z0-9+.-]*:/i.test(alvo)) alvo = `https://${alvo}`;
+
+    setEnviando(true);
+    try {
+      const resposta = await fetch('/api/links', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url: alvo }),
+      });
+      const dados = await resposta.json().catch(() => ({}));
+      if (!resposta.ok) return setErro(dados.erro || 'Não deu para encurtar esse link. Tente de novo.');
+      setCriado(dados as LinkJson);
+      setCopiado(false);
+      setUrl('');
+      await carregarLinks();
+    } catch {
+      setErro('Sem conexão com o servidor. Tente de novo.');
+    } finally {
+      setEnviando(false);
+    }
+  }
+
+  async function copiar() {
+    if (!criado) return;
+    try {
+      await navigator.clipboard.writeText(criado.curto);
+      setCopiado(true);
+    } catch {
+      // Navegador sem permissão de área de transferência: seleciona o link.
+      const alvo = document.getElementById('curto');
+      if (alvo) getSelection()?.selectAllChildren(alvo);
+    }
+  }
+
+  return (
+    <>
+      <section className="cartao">
+        <form className="formulario" onSubmit={encurtar} noValidate>
+          <label htmlFor="url" className="so-leitor">
+            Link para encurtar
+          </label>
+          <input
+            id="url"
+            name="url"
+            type="url"
+            inputMode="url"
+            maxLength={2048}
+            placeholder="Cole seu link aqui"
+            autoComplete="off"
+            required
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+          />
+          <button type="submit" disabled={enviando}>
+            Encurtar
+          </button>
+        </form>
+        {erro && (
+          <p className="erro" role="alert">
+            {erro}
+          </p>
+        )}
+        {criado && (
+          <div className="resultado">
+            <a id="curto" href={criado.curto} target="_blank" rel="noopener">
+              {semProtocolo(criado.curto)}
+            </a>
+            <button type="button" className="secundario" onClick={copiar}>
+              {copiado ? 'Copiado!' : 'Copiar'}
+            </button>
+          </div>
+        )}
+      </section>
+
+      <h2>Últimos links</h2>
+      <section className="cartao">
+        {links.length === 0 ? (
+          <p className="vazio">Nenhum link ainda. Encurte o primeiro aí em cima.</p>
+        ) : (
+          <ul className="lista">
+            {links.map((link) => (
+              <li key={link.codigo}>
+                <div className="link-info">
+                  <a href={link.curto} target="_blank" rel="noopener">
+                    {semProtocolo(link.curto)}
+                  </a>
+                  <span className="destino" title={link.url}>
+                    {link.url}
+                  </span>
+                </div>
+                <span className="cliques">{link.cliques === 1 ? '1 clique' : `${link.cliques} cliques`}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </>
+  );
+}
@@ -0,0 +1,48 @@
+import { FORMATO_CODIGO, registrarClique } from '@/lib/links';
+
+// O redirecionamento é feito pelo servidor: GET /<código> → 302 para o link.
+export async function GET(_request: Request, { params }: { params: Promise<{ codigo: string }> }) {
+  const { codigo } = await params;
+  const link = FORMATO_CODIGO.test(codigo) ? registrarClique(codigo) : null;
+  if (!link) {
+    return new Response(PAGINA_NAO_ENCONTRADA, {
+      status: 404,
+      headers: { 'Content-Type': 'text/html; charset=utf-8' },
+    });
+  }
+  return new Response(null, { status: 302, headers: { Location: link.url, 'Cache-Control': 'no-store' } });
+}
+
+const PAGINA_NAO_ENCONTRADA = `<!doctype html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Link não encontrado</title>
+    <style>
+      :root { color-scheme: light dark; }
+      body {
+        margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
+        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+        background: #f6f7f9; color: #14161a; line-height: 1.5;
+      }
+      main { max-width: 420px; text-align: center; }
+      h1 { font-size: 24px; margin: 0 0 8px; }
+      p { color: #5b6270; margin: 0 0 20px; }
+      a { color: #3b5bdb; font-weight: 600; }
+      @media (prefers-color-scheme: dark) {
+        body { background: #0f1115; color: #eceef2; }
+        p { color: #9aa1ad; }
+        a { color: #8299ff; }
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Link não encontrado</h1>
+      <p>Esse link curto não existe ou sumiu quando o app foi publicado de novo.</p>
+      <a href="/">Encurtar um link</a>
+    </main>
+  </body>
+</html>
+`;
@@ -0,0 +1,58 @@
+import { criarLink, enderecoBase, ErroDeValidacao, listarLinks, paraJson } from '@/lib/links';
+
+// CORS aberto só na API: qualquer site (ou outro app seu) pode chamar /api/*.
+const CORS = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+};
+
+// Freio simples contra abuso: no máximo 30 links novos a cada 10 minutos por IP.
+const LIMITE_POR_IP = 30;
+const JANELA_MS = 10 * 60 * 1000;
+const tentativas = new Map<string, { total: number; expiraEm: number }>();
+
+function passouDoLimite(ip: string): boolean {
+  const agora = Date.now();
+  if (tentativas.size > 10_000) tentativas.clear();
+  const atual = tentativas.get(ip);
+  if (!atual || atual.expiraEm <= agora) {
+    tentativas.set(ip, { total: 1, expiraEm: agora + JANELA_MS });
+    return false;
+  }
+  atual.total += 1;
+  return atual.total > LIMITE_POR_IP;
+}
+
+const erro = (status: number, mensagem: string) => Response.json({ erro: mensagem }, { status, headers: CORS });
+
+export function OPTIONS() {
+  return new Response(null, { status: 204, headers: CORS });
+}
+
+export function GET(request: Request) {
+  const base = enderecoBase(request.headers);
+  return Response.json(
+    { links: listarLinks().map((link) => paraJson(link, base)) },
+    { headers: { ...CORS, 'Cache-Control': 'no-store' } },
+  );
+}
+
+export async function POST(request: Request) {
+  const ip = request.headers.get('cf-connecting-ip') ?? request.headers.get('x-forwarded-for')?.split(',')[0].trim() ?? '?';
+  if (passouDoLimite(ip)) return erro(429, 'Muitos links em pouco tempo. Espere alguns minutos e tente de novo.');
+
+  let corpo: { url?: unknown } | null;
+  try {
+    corpo = await request.json();
+  } catch {
+    return erro(400, 'Corpo inválido. Envie JSON no formato {"url": "https://..."}.');
+  }
+  try {
+    const link = criarLink(corpo?.url);
+    return Response.json(paraJson(link, enderecoBase(request.headers)), { status: 201, headers: CORS });
+  } catch (e) {
+    if (e instanceof ErroDeValidacao) return erro(400, e.message);
+    throw e;
+  }
+}
@@ -0,0 +1,107 @@
+/* Mesmo visual nos modelos Next.js, Express e FastAPI. Mude à vontade. */
+:root {
+  --fundo: #f6f7f9;
+  --cartao: #ffffff;
+  --texto: #14161a;
+  --suave: #5b6270;
+  --borda: #e3e6eb;
+  --destaque: #3b5bdb;
+  --destaque-texto: #ffffff;
+  --destaque-suave: #edf1ff;
+  --erro: #c92a2a;
+  --raio: 14px;
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  color-scheme: light dark;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --fundo: #0f1115;
+    --cartao: #171a21;
+    --texto: #eceef2;
+    --suave: #9aa1ad;
+    --borda: #2a2f3a;
+    --destaque: #8299ff;
+    --destaque-texto: #0f1115;
+    --destaque-suave: #1e2540;
+    --erro: #ff8787;
+  }
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: var(--fundo);
+  color: var(--texto);
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+}
+.pagina { max-width: 640px; margin: 0 auto; padding: 56px 16px 32px; }
+.topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
+.marca {
+  flex: none; width: 40px; height: 40px; border-radius: 10px;
+  background: var(--destaque); color: var(--destaque-texto);
+  display: grid; place-items: center;
+}
+h1 { font-size: 28px; line-height: 1.2; margin: 0; letter-spacing: -0.02em; }
+h2 { font-size: 16px; margin: 32px 0 12px; }
+.lead { color: var(--suave); margin: 0 0 24px; }
+.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; }
+.formulario { display: flex; gap: 8px; }
+.formulario input {
+  flex: 1; min-width: 0; font: inherit; padding: 12px 14px;
+  border: 1px solid var(--borda); border-radius: 10px;
+  background: var(--fundo); color: var(--texto);
+}
+.formulario input:focus { outline: 2px solid var(--destaque); outline-offset: 1px; }
+button {
+  font: inherit; font-weight: 600; padding: 12px 20px; border: 0; border-radius: 10px;
+  background: var(--destaque); color: var(--destaque-texto); cursor: pointer; white-space: nowrap;
+}
+button:disabled { opacity: 0.6; cursor: progress; }
+button:focus-visible, a:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
+.secundario { background: var(--cartao); color: var(--destaque); border: 1px solid var(--borda); padding: 8px 14px; }
+.erro { color: var(--erro); margin: 10px 0 0; font-size: 14px; }
+.resultado {
+  margin-top: 16px; display: flex; align-items: center; gap: 12px;
+  padding: 12px 14px; border-radius: 10px; background: var(--destaque-suave);
+}
+.resultado a {
+  flex: 1; min-width: 0; font-family: var(--mono); font-weight: 600;
+  color: var(--destaque); text-decoration: none; overflow-wrap: anywhere;
+}
+.lista { list-style: none; margin: 0; padding: 0; }
+.lista li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borda); }
+.lista li:first-child { border-top: 0; padding-top: 0; }
+.lista li:last-child { padding-bottom: 0; }
+.link-info { flex: 1; min-width: 0; }
+.link-info a { font-family: var(--mono); font-weight: 600; color: var(--texto); text-decoration: none; overflow-wrap: anywhere; }
+.link-info a:hover { color: var(--destaque); }
+.destino { display: block; color: var(--suave); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.cliques { font-family: var(--mono); font-size: 14px; color: var(--suave); white-space: nowrap; }
+.vazio { color: var(--suave); margin: 0; }
+.aviso {
+  margin: 16px 0 0; font-size: 14px; color: var(--suave);
+  border: 1px dashed var(--borda); border-radius: var(--raio); padding: 14px 16px;
+}
+.aviso a { color: var(--destaque); font-weight: 600; }
+.sobre { margin-top: 32px; }
+.sobre h2 { margin-top: 0; }
+.sobre dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
+.sobre dt { color: var(--suave); }
+.sobre dd { margin: 0; overflow-wrap: anywhere; }
+.dica { font-size: 13px; color: var(--suave); margin: 14px 0 0; }
+code { font-family: var(--mono); font-size: 0.92em; }
+.rodape { margin-top: 32px; text-align: center; font-size: 13px; color: var(--suave); }
+.rodape a { color: inherit; }
+.so-leitor {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+@media (max-width: 480px) {
+  .pagina { padding-top: 32px; }
+  h1 { font-size: 24px; }
+  .formulario { flex-direction: column; }
+  .resultado { flex-direction: column; align-items: stretch; }
+  .sobre dl { grid-template-columns: 1fr; gap: 0; }
+  .sobre dd { margin-bottom: 8px; }
+}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#3b5bdb"/><path d="M13.5 18.5l5-5M12 15l-2 2a3.5 3.5 0 005 5l2-2M20 17l2-2a3.5 3.5 0 00-5-5l-2 2" stroke="white" stroke-width="2.2" fill="none" stroke-linecap="round"/></svg>
@@ -0,0 +1,16 @@
+import type { Metadata } from 'next';
+
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Encurtador de links',
+  description: 'Encurte links e acompanhe quantas vezes cada um foi aberto.',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="pt-BR">
+      <body>{children}</body>
+    </html>
+  );
+}
@@ -0,0 +1,76 @@
+import { headers } from 'next/headers';
+
+import { enderecoBase, listarLinks, paraJson } from '@/lib/links';
+
+import pacote from '../package.json';
+import Encurtador from './Encurtador';
+
+// A página lê os links e as variáveis a cada visita (nada de HTML congelado no build).
+export const dynamic = 'force-dynamic';
+
+// Variável de ambiente de exemplo: na Dado, ela se configura no painel do app.
+const MENSAGEM = process.env.MENSAGEM_BOAS_VINDAS || 'Defina a variável MENSAGEM_BOAS_VINDAS para trocar este texto.';
+// Hora em que o processo do servidor subiu (= a publicação mais recente).
+const INICIO = new Date(Date.now() - process.uptime() * 1000);
+const fusoBrasilia = { timeZone: 'America/Sao_Paulo' } as const;
+const INICIO_FORMATADO = `${INICIO.toLocaleDateString('pt-BR', fusoBrasilia)} às ${INICIO.toLocaleTimeString('pt-BR', {
+  ...fusoBrasilia,
+  hour: '2-digit',
+  minute: '2-digit',
+})} (horário de Brasília)`;
+
+export default async function Pagina() {
+  const base = enderecoBase(await headers());
+  const linksIniciais = listarLinks().map((link) => paraJson(link, base));
+
+  return (
+    <main className="pagina">
+      <header className="topo">
+        <span className="marca" aria-hidden="true">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+            <path d="M10 14l4-4M8.5 11.5l-1.8 1.8a3.2 3.2 0 004.5 4.5l1.8-1.8M15.5 12.5l1.8-1.8a3.2 3.2 0 00-4.5-4.5l-1.8 1.8" />
+          </svg>
+        </span>
+        <h1>Encurtador de links</h1>
+      </header>
+      <p className="lead">Cole um link comprido e receba um endereço curto, pronto para compartilhar.</p>
+
+      <Encurtador linksIniciais={linksIniciais} />
+
+      <p className="aviso">
+        Os links ficam na memória do app e somem quando ele é publicado de novo. Para guardar os links de vez,{' '}
+        <a href="https://app.dado.cloud/deploys" target="_blank" rel="noopener">
+          ligue um Postgres
+        </a>
+        .
+      </p>
+
+      <section className="sobre cartao" aria-labelledby="sobre-titulo">
+        <h2 id="sobre-titulo">Sobre este deploy</h2>
+        <dl>
+          <dt>Runtime</dt>
+          <dd>{`Next.js ${pacote.dependencies.next} · Node.js ${process.versions.node}`}</dd>
+          <dt>Região</dt>
+          <dd>Rodando em São Paulo</dd>
+          <dt>No ar desde</dt>
+          <dd>
+            <time dateTime={INICIO.toISOString()}>{INICIO_FORMATADO}</time>
+          </dd>
+          <dt>Mensagem</dt>
+          <dd>{MENSAGEM}</dd>
+        </dl>
+        <p className="dica">
+          A mensagem vem da variável <code>MENSAGEM_BOAS_VINDAS</code>. Troque o valor nas configurações do app, no
+          painel, e publique de novo.
+        </p>
+      </section>
+
+      <footer className="rodape">
+        Publicado na{' '}
+        <a href="https://dado.cloud" target="_blank" rel="noopener">
+          Dado
+        </a>
+      </footer>
+    </main>
+  );
+}
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#3b5bdb"/><path d="M13.5 18.5l5-5M12 15l-2 2a3.5 3.5 0 005 5l2-2M20 17l2-2a3.5 3.5 0 00-5-5l-2 2" stroke="white" stroke-width="2.2" fill="none" stroke-linecap="round"/></svg>`