Regras de URL e título portadas do PHP
Portei para TypeScript as funções do PHP que geram slugs e títulos, incluindo detalhes como o strtolower do PHP, que só altera letras ASCII. Os comentários do código apontam os 14 arquivos .inc.php de origem.
Novo site da REDD Brindes
Refiz o site da REDD, um catálogo de brindes que vende por orçamento. Mantive os endereços e os títulos das páginas antigas para não perder o que o Google já conhece. A versão nova está em testes e ainda não substituiu a antiga.
- Papel
- Autor de todos os 8 commits, portando as regras do PHP antigo
- Período
- out. 2026
- Stack
- Next.js 16, React 19, TypeScript, Tailwind CSS, TanStack Query
- Commits
- 8 de 8
Site antigo × site novo
A mesma URL pedida aos dois sites, 4 por vez
| Caminho | Status | H1 |
|---|---|---|
| / | 200 | igual |
| /brindes/canecas-e-copos | 200 | igual |
| /brinde/1234-caneca-personalizada | 200 | igual |
| /brindes/garrafas/30/60 | 200 | igual |
| /home | 308 → / | — |
- travas contra escrita no banco do sistema
- 3
- redirecionamentos e repasses ao site antigo
- 8 + 5
- produtos por página, com o resto ao rolar
- 48
Contexto
O site antigo, em PHP, já tem tráfego orgânico, e o banco dele é o MySQL que outros sistemas da empresa também usam. Refazer tinha duas restrições: manter as URLs e os títulos que o Google já conhece e não gravar nada nesse banco. O que o PHP gravava, como carrinho e orçamentos, passou para o navegador e para o e-mail.
O que faz
- Catálogo com as mesmas rotas do PHP: coleções, tipos, categorias, subcategorias, busca e filtro de preço no caminho.
- Listagens com scroll infinito de 48 em 48; a primeira página vem do servidor e um link real para a próxima continua no HTML para o Google.
- Página de produto com galeria, especificações, quantidade mínima e produtos do mesmo tipo.
- Orçamento salvo no navegador, com até 3 quantidades por item e o mínimo de cada produto conferido de novo no servidor.
- Formulário de orçamento que valida o CNPJ, preenche o endereço pelo CEP e manda a confirmação por e-mail para o cliente.
- Busca com autocomplete a partir de 2 letras, com foto e código do produto.
- Sitemaps com os mesmos nomes do site antigo, robots.txt e dados estruturados de organização, produto e navegação.
- Página 404 com busca e atalhos para as coleções.
- Endpoint de imagens compatível com o antigo, redimensionando com sharp.
Decisões
Banco do sistema com três travas contra escrita
O site lê o MySQL que outros sistemas da empresa também usam. A consulta só aceita leitura, cada conexão abre em modo somente leitura e múltiplos comandos ficam desligados. A entrada do usuário entra sempre por placeholder.
Redirect e 404 nas rotas antigas
Slug errado leva com redirect permanente para a URL canônica, produto desativado leva para a listagem do tipo e endereço inexistente devolve 404. URLs antigas com caracteres em latin1, que o Next recusaria, são convertidas e redirecionadas.
Scroll infinito que o Google consegue seguir
A primeira página de cada listagem vem pronta do servidor e as seguintes chegam conforme a pessoa rola. O gatilho é um link real para a próxima página, então quem não rola também alcança todos os produtos.
Cache escolhido para manter os status HTTP
Usei o ISR clássico em vez do cache novo do Next 16 para garantir redirects e 404 corretos nas rotas antigas. As consultas ao banco ficam em cache por uma hora.
Um script para a troca do domínio
O compare.mjs pede o mesmo caminho ao site antigo e ao novo e lista as diferenças de status, redirect, title, canonical e H1. Faz 4 requisições por vez, com pausa de 300 ms, para não pesar no servidor de produção.
Detalhes técnicos
Arquitetura
- Next.js 16 com App Router, Server Components e ISR.
- Pool mysql2 somente leitura, com 23 funções de consulta em cache.
- Port para TypeScript das regras de slug, título e leitura das rotas do PHP; os comentários citam 14 arquivos .inc.php como origem.
- 8 redirects permanentes e 5 rewrites para o servidor antigo nos arquivos ainda não migrados.
Interface
- Zustand com persistência para o orçamento e os favoritos.
- TanStack Query no autocomplete e no scroll infinito; TanStack Form nos formulários.
- Server Actions com Zod e nodemailer para o envio dos formulários.