Template
89 lines
3.3 KiB
Markdown
89 lines
3.3 KiB
Markdown
# Encurtador de links em Next.js
|
|
|
|
Um encurtador de links pronto para publicar na [Dado](https://dado.cloud): 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.
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
MENSAGEM_BOAS_VINDAS="Oi, mundo" npm run dev
|
|
```
|
|
|
|
## API
|
|
|
|
```bash
|
|
# 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.
|