Executando verificação de segurança...
2
birobirobiro
2 min de leitura ·

[PITCH] Como meu portfólio derrubou minha conta na Vercel

Desenvolvi a versão 2.0 do meu portfólio totalmente do zero. Essas são as tecnologias que estou utilizando atualmente:

  • Next.js 13
  • Tailwind CSS
  • shadcn/ui
  • Spotify API
  • Notion API (CMS)
  • Lanyard API (Discord presence)
  • Vercel (Host)
  • Google (Domain, Analytics)
  • Cloudinary (Image Host)
  • TabNews API, HackerTab API (listar as últimas notícias de tecnologia)

portfolio

Problemas

Estou usando a API Notion como CMS para alimentar todo o conteúdo que tem dentro do meu site nas seguintes páginas (setup, stack, podcasts, projetos, talks)

| Aprendi fazer isso com o vídeo do @joaobibiano

Algumas dessas páginas eu utilizo imagens e tinha criado na database do Notion uma tabela com a propriedade do tipo file para hospedar as imagens diretamente pelo Notion.

E isso, acabou me gerando um problemão na Vercel por conta do Image Optimization, pois extrapolou o limite de otimizações no mês e tive minha conta bloqueada.

A cada requisição que era feita, o link das imagens era atualizado e otimizava todas vez essas imagens.

portfolio

No dia que isso aconteceu, postei um tweet comemorando a inauguração desse meu novo portóflio, só que o que não espava era que fosse repercurtir tanto. E essa repercursão foi tão grande, que até o Lee Robinson me mandou mensagem quando comentei sobre o que tinha acontecido.

portfolio

Resolução do problema

Uma forma de conseguir contornar isso, foi hospedar todas as imagens que uso no site em um servidor de imagem, o cloudinary e usar na database do Notion o tipo url.

No final, o Lee Robinson foi super legal e acabou desbloqueando minha conta. E depois descobri também que dava pra desabilitar isso no next.config.js

  images: {
    unoptimized: true
  },

Enfim, aprendizados né! 😅

Agora acessa meu portfólio e veja como ficou e aproveita e me segue nas redes sociais👇

Fonte: https://birobirobiro.dev

Carregando publicação patrocinada...
2
FelipeBarso

Muito bom poder desabilitar completamente a otimização diretamente pelo next.config.js, mas também dá para desabilitar por imagem com a propriedade unoptimized:

<Image {...props} unoptimized />

Segue a documentação:

https://nextjs.org/docs/pages/api-reference/components/image#unoptimized

Realmente o limite de otimizações foi atingido pela mudança na URL, pois se a mesma origem for usada diversas vezes, mesmo com transformações diferentes, ela é contada apenas uma vez para cada período de faturamento. Conforme a documentação:

https://vercel.com/docs/limits/usage#image-optimization

0
1
clacerda

Parabéns pelo portfolio muito bonito e atrativo, também gostei muito das camisetas que vende.

Mas preciso dizer que me parece tudo complicado e over-engineered demais!

O problema que você enfrentou de derrubar sua conta após usar a API Notion como CMS - que aprendeu em um video - é um otimo exemplo de como é perigoso e problemático implementar soluções sem compreender realmente o que está acontecendo!!!

Essa solução é realmente melhor que acessar o host via ssh e editar um arquivo de markdown? Não questiono que existam vantagens, mas você avaliou as diferentes soluções baseados em criterios de engenharia? Ou simplesmente optou por esta solução por que era legal?

No mais como disse anteriormente, é realmente um belo portfolio, que é de fato um excelente ambiente de aprezendido e experimentação. Mas não se esqueça do KISS.