O DevToolbox é uma aplicação Next.js 15 com ferramentas para desenvolvedores como formatador JSON, codificador Base64, gerador de UUID e mais. Usa App Router, Server Components e Tailwind CSS 4.
O DevToolbox é uma aplicação web com uma coleção de ferramentas úteis para desenvolvedores — aquelas que você usa no dia a dia mas sempre precisa pesquisar no Google: formatadores, codificadores, geradores e conversores.
Acesse em: devtools.catiteo.com
O projeto reúne diversas utilidades em um só lugar:
Escolhi o Next.js 15 com App Router para explorar as últimas novidades do ecossistema React:
A maioria das páginas do DevToolbox são Server Components — o HTML chega pronto ao browser, sem JavaScript desnecessário. Só os componentes interativos (os que precisam de estado) são Client Components.
O App Router permite layouts aninhados nativamente. O DevToolbox usa isso para manter a barra lateral de navegação entre ferramentas sem re-renderizações.
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="pt-BR">
<body>
<Sidebar />
<main>{children}</main>
</body>
</html>
);
}
Com Next.js 15, o Turbopack está estável para desenvolvimento. O hot reload ficou perceptivelmente mais rápido comparado ao webpack.
Framework: Next.js 15 (App Router)
Linguagem: TypeScript 5
Estilo: Tailwind CSS 4
Deploy: Cloudflare Pages (static export)
O maior aprendizado foi entender quando usar Server Components vs Client Components. A regra que adotei: começa como Server Component, só vira Client se precisar de useState, useEffect ou event listeners do browser.
Outra lição foi o static export do Next.js no Cloudflare Pages — algumas funcionalidades do App Router não funcionam no modo estático, como Route Handlers com métodos dinâmicos. Para o DevToolbox, que não precisa de backend, o export estático foi a escolha certa.
Se tiver alguma ferramenta que sente falta, deixa nos comentários!
Receba novos posts diretamente no seu email.
Um gerenciador de snippets de código construído com SvelteKit 2 e Svelte 5, explorando a nova API de reatividade chamada Runes.
Como construí um CMS completo com Astro 5, Cloudflare D1, Workers AI e MinIO self-hosted — com painel admin, IA integrada e custo zero.