Como resolvi uploads de imagem no meu projeto Next.js sem dor de cabeça (e mais barato que S3)
Faz alguns meses que lancei o BikeClub, uma comunidade sobre bikes elétricas no Brasil, fórum, reviews, blog, comparativos de modelos. O projeto cresceu rápido e uma das funcionalidades que precisei implementar cedo foi upload de imagem: foto de perfil dos usuários, fotos nas reviews de bikes...
A primeira ideia óbvia foi S3. Mas aí você começa a pensar: configurar bucket, IAM, políticas, CORS, presigned URLs, lidar com multipart... para um projeto solo ou pequeno time, é muito overhead pro que entrega. Foi aí que encontrei o UploadThing.
O que é?
É um serviço de upload de arquivos criado especificamente para o ecossistema Next.js/React, mas que funciona com qualquer backend Node. A proposta é simples: você define "routers" de upload no servidor, especificando tipo de arquivo, tamanho máximo e middleware de autenticação. O cliente usa um hook pronto.
// server: app/api/uploadthing/core.ts
export const ourFileRouter = {
avatarUpload: f({ image: { maxFileSize: "2MB" } })
.middleware(async ({ req }) => {
const user = await getUser(req)
if (!user) throw new Error("Unauthorized")
return { userId: user.id }
})
.onUploadComplete(async ({ metadata, file }) => {
await db.user.update({
where: { id: metadata.userId },
data: { avatar: file.url },
})
}),
}
// client
const { startUpload } = useUploadThing("avatarUpload")
Literalmente isso. Sem configurar bucket, sem gerar presigned URL manualmente, sem lidar com CORS.
Por que não S3 direto?
Custo: no tier gratuito do UploadThing tenho 2GB de storage e 10GB de banda/mês, que cobre bem o início. Escala depois com preço razoável.
Velocidade de desenvolvimento: implementei em menos de 1 hora. S3 do zero levaria um dia inteiro com todos os edge cases.
DX: a integração com Next.js App Router é de primeira, tem adaptador pronto, o hook useUploadThing já lida com progresso, erro e sucesso.
Quando NÃO usar:
Se você tem volume alto de uploads (centenas de GBs), S3 + CloudFront provavelmente sai mais barato na ponta. O UploadThing faz sentido quando a DX e a velocidade de entrega importam mais que otimização de centavo no storage.
Dúvidas, experiências com outras soluções (Cloudinary, Supabase Storage, R2...)? Bora trocar ideia nos comentários.
Fonte: https://bikeclub.app/