Blog com Next.JS, Cosmic.JS e Vercel | Abílio Azevedo

Abílio Azevedo.

Blog com Next.JS, Cosmic.JS e Vercel

Cover Image for Blog com Next.JS, Cosmic.JS e Vercel
Abílio Azevedo
Abílio Azevedo

Decidi criar um blog com páginas "estáticas" (Next.JS), com um sistema de gestão de conteúdo (Cosmic.JS) e com deploy em CDN (Vercel).

Páginas estáticas (Next.JS)

Hoje estamos chegando a aproximadamente 2 bilhões de sites na internet (https://www.internetlivestats.com/) e são diversas tecnologias envolvidas mas no final das contas temos um HTML (HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) e CSS (Cascading Style Sheets, que significa Folhas de Estilo em Cascata) interpretados pelo navegador para mostrar o conteúdo na sua tela. Uma página da web estática é entregue ao navegador do usuário exatamente como foi armazenada, sendo mais rápida de ser consumida pelo usuário. Porém temos um lado negativo, você não pode alterar dinamicamente o conteúdo do seu site, pois é preciso reescrever o código fonte. Hoje, podemos gerar dinamicamente as páginas estáticas e guardá-las em nossos servidores. Podemos gerar nossas páginas de duas formas usando o Next.JS.

1 - Geração Estática no build, cada vezes que buildamos nossa aplicação, teremos novos assets estáticos.

2 - SSR (Server Side Rendering, ou renderização do lado do servidor) podemos gerar variações de nossas páginas no lado do servidor a cada request

Sistema de Gestão de Conteúdo CMS (Cosmic.JS)

O Cosmic.JS é um Headless CMS (Content Manager System), ou seja, um sistema de gestão de conteúdo que é independente da interface do usuário. No meu caso usei o Next.JS para consumir o conteúdo que coloquei no Cosmic.JS (Posts, Imagens, Arquivos...) e mostrar para você nesse site.

Deploy em CDN (Vercel)

CDN (Content Delivery Network) é a Rede de Distribuição de Conteúdo. Essa tecnologia distribui o conteúdo em diversos servidores criando uma rede e aumentando a velocidade de entrega aos usuários que estejam acessando um mesmo site em diferentes locais. No meu caso utilizei o sistema da Vercel que oferece deploy contínuo integrado ao Github.

Rápido Tutorial

  • Clonei este template de blog, fiz algumas modificações no código;
  • Adicionei minhas chaves do Cosmic.JS e fiz algumas postagens aparecerem no blog;
  • Adicionei o Disqus como ferramenta de comentários. Teste, deixando seu comentário no final deste post =)
  • Fiz esta e outras postagens;
  • Criei minha conta na Vercel e conectei meu repositório para fazer o deploy automático.;
  • Comprei um domínio e configurei os registros na Vercel;
  • Pronto;

Resultado de performance Lighthouse

Wordpress Novo Blog
image image

OBS: Ao adicionar um conteúdo novo no Cosmic é preciso gerar as novas páginas estáticas, isso pode ser feito de forma manual pela Vercel ou com um webhook.

E aí? Gostou? Deixe seu comentário, sugestão ou critica construtiva abaixo =)


Mais Histórias

Cover Image for Imersão React edição Next JS da Alura!

Imersão React edição Next JS da Alura!

Desenvolvemos um app de QUIZES em NEXT.JS.

Abílio Azevedo
Abílio Azevedo
Cover Image for Fintechs: Material UX e UI

Fintechs: Material UX e UI

Material de Benchmark de Fintechs Brasileiras

Abílio Azevedo
Abílio Azevedo

NewsLetter

Eu enviarei o conteúdo postado aqui no blog. Sem Spam =)