Executando verificação de segurança...
2

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.

Carregando publicação patrocinada...
2

Legal sua plataforma e eu não conhecia esse UploadThing, bacana.

Alguns anos atrás precisei desenvolver uma galeria de arte e usei o Cloudinary. O plano gratuito atendia bem, mas não sei como está hoje. Tem alguns conceitos de plataformas de imagens que precisei lidar, que pode contribuir para sua plataforma de bikes:

  • Para as fotos miniaturas e avatares de usuários, é interessante armazenar uma versão em menor tamanho e qualidade. Por exemplo: se o usuário carrega uma imagem full HD (2MB) e você apresenta como miniatura em 200px; é mais performático ter uma versão em 200px (que cai para alguns KB) e apresentar ela no lugar da original.
  • Para fotos em grande escala, tem uma estratégia que chama compressão de imagens, onde você consegue "diminuir" a qualidade da imagem sem ser perceptível, reduzindo o armazenamento até uns 30~50% .

Quando fiz a galeria e usei o Cloudinary, eu conseguia manipular tamanho e compressão via API durante o upload, mas existe por exemplo a biblioteca Sharp (https://www.npmjs.com/package/sharp) que você consegue manipular as imagens para as estratégias que comentei acima e subir no UploadThing