Porque Next.js + Strapi?

6 min readJul 3, 2020

Olá pessoal, resolvi criar uma série de artigos sobre a stack: Next.js + Strapi, vou abordar coisas como Tailwind CSS, AWS, Docker, TypeScript, e tenho como objetivo com essa série de artigos ajudar e discutir sobre essa stack que vem sendo cada vez mais adotada em projetos web.

Antes de tudo… O que é Headless CMS?

Em resumo, é um sistema de gerenciamento de conteúdo como WordPress, Drupal ou Contentful em que o gerenciamento de conteúdo é separado da camada de apresentação (Front-end).

A principal vantagem dessa abordagem é que ela é independente de tecnologia, o que significa que o site (em Frameworks SPA ou como quiser) ,apps nativos ou pode ser criado usando as ferramentas ou a tecnologia que você desejar.

A principal desvantagem é que você precisa gerenciar dois aplicativos web ou mais ao invés de um. (O que pode ser desvantagem,dependendo da formação de sua equipe.)

Existem CMS que vem como padrão Headless (Baseados em API), e tem alguns que são Baseados em GIT, geram sites estáticos.
E outros que também são baseados em API mas que não vem nessa arquitetura por padrão e é necessário utilizar plugins.

A vantagem de ser por padrão Headless e Baseado em API , é que:
você tem uma fonte de informação e pode fazer muitas aplicações para diversos dispositivos a partir dela.

O fato de ser uma funcionalidade do core do CMS, indica que a chance de suporte e atualizações a API Headless, são grandes, ao passo que se for um plugin a chance de não ser suportado pode ser grande.

Se quer saber mais de uma olhada aqui: https:/headlesscms.org/

Porque o Strapi?

Strapi é um CMS Open Source , feito em Node.js e MongoDb, também suporta MYSQL,MariaDB, SQLite e PostgreSQL.

Vem com suporte á fácil deploy a AWS, Digital Ocean e Heroku.

Tem uma documentação rica e vários tutoriais de como usar o CMS.
É possivel instalar local via CLI ou usando Docker, usando Plataform.sh ou Digital Ocean, ou onde você quiser.

É possível fazer testes unitários com Jest, ou outros frameworks de teste, já que o Strapi tem um webpack configurável.

Strapi, possui também webhooks para disparar ações para outras aplicações.

A Arquitetura do Strapi é bem simples e fundamentada, explica-se como escrever plugins, como modelar a API do Strapi, como montar os conteúdos a serem exportados.

Considero a curva de aprendizado do Strapi entre baixa e média, depende do conhecimento do desenvolvedor com Node.js e do conceito de CMS Headless, se o desenvolvedor tiver dúvidas pode dar uma olhada nos exemplos, tutoriais ou documentações já existentes.

É possível restringir as chamadas das apis com JWT a grupos de usuários do Strapi.

Internacionalização é apenas possivel com um workaround, criando campos com sufixo por línguas

O grande concorrente do Strapi no mundo Node.js é o Ghost, e no OpenSource é o Directus (feito em PHP) , e o WordPress com sua Rest Api que desde a versão 4.7 faz parte do Core do WordPress e não mais por plugin ( Obrigado,ao leitor Diego Rodrigues pela observação) .

Dessas 4 opções Open Source, considero o Strapi melhor, por que você entende como é simples gerencia-lo e estendê-lo. WordPress além de problemas de segurança, tem um conceito base diferente do Strapi. Você pode atingir o mesmo objetivo do Strapi , mas fazendo mais configurações e utilizando vários plugins.

Já o Ghost apresenta um cenário um pouco parecido, mas muitas vezes para fazer a mesma coisa que você faz no Strapi você vai precisar de mais trabalho pra mesma coisa. Ghost é muito bom na parte de segurança, mas na parte de conteúdo, Strapi é mais simples e mais completo.

O Directus é um dos CMS que apresentam, uma proposta bem parecida com o Strapi, mas a stack dele é PHP, e tem reports de bugs criticos por usuários.

Porque Next.js?

Com a ascenção dos frameworks SPAS, passando do Angular.js, React, Angular 2+ e Vue, um grande problema que as aplicações renderizadas no client enfrentam é a questão do SEO.

Esse é um bom artigo para ler sobre.

Frameworks como o Next.js vem para solucionar esse problema. Renderizando a aplicação via SSR ( Server Side Rendering) ou (Renderizando no nosso Servidor), ou SSG (Static Site Generation), o buscador consegue ler o conteúdo da sua página, e renderiza-la para seus resultados.

Mas os benefícios vão além disso. O Next.js aumenta a performance de carregamento da sua aplicação. Em um teste básico no Google LightHouse ( vamos abordar isso em breve) , uma aplicação com create-react-app x uma aplicação Next.js SSR, teve um first meaningful paint com o tempo 87% menor do que uma aplicação React CSR (Client — side Rendering) , isso grande parte ao Next.js já renderizar parte da sua aplicação no Server, trazendo o conteúdo na tela antes de ler tudo no client.

Ele tem um esquema de pastas e links que permite também o lazy-loading de módulos, assim como o code-splitting automático.

Você pode escolher quais pages você vai renderizar no servidor e quais vocês vai renderizar de modo estático fazendo assim um app Híbrido.

O Next.js tem suporte a AMP (Acellerated Mobile Pages) : Onde ele não vai renderizar nada de Node.js e React, e apenas páginas no formato do AMP.

O Next.js tem suporte também a toda gama de universo CSS, desde pré-processadores como SASS, LESS e Stylus, como também a CSS Modules, Styled Components, CSS-in-JS, TailWind CSS, Bootstrap etc.

O Next.js tem um foco muito forte em performance, e tem ferramentas para você medir isso. (Isso vai ser assunto para um artigo em separado).

Conseguimos usar o Next.js também com TypeScript, garantido como lidamos com os dados da nossa aplicação através das interfaces e tipos.

Dentro dele você também consegue fazer DynamicImports, usando a sintaxe do ES2020, e gerando componentes dinamicamente.

Esses são alguns benefícios do Next.js, além de resolver e nos ajudar com os problemas de SEO dos frameworks SPA, ele nos dá todo o ecossistema React, para poder trabalhar, além de nos ajudar, com uma estrutura enxuta e toda documentação rica.

Algumas empresas que usam o Next.js: GoDaddy, Via Varejo, Netflix,Marvel,Invision App, Nubank,Sumup, Tencent, Tiktok, Uber, Trip.com, HostGator, Auth0, Binance, Staples, TicketMaster, Playstation, IGN, AT&T, Hulu, Twitch, Nike, Lego, Material UI, Expo, Ferrari, Avocode, Styled Components, Televisión Pública Argentina, Volvo, The Economist,
Workable, Vodafone, Coinmarketcap, Monday, Elastic, History Channel , A&E Tv, Lifetime, Hackernoon, Spotify, Beleza na Web, Pier, DAZN, Apify,
CloudBees, Deno, Ebanx, Geru,Crazygames.com

Next.js x Nuxt x Angular Universal x Outros Frameworks SSR React:

Existem outros frameworks, que competem diretamente com o Next.js A idéia não é fazer uma comparação entre eles. Mas basicamente cada um segue uma ferramenta seja o Nuxt.js com Vue, ou o Angular com Angular Universal.

A idéia não é fazer um comparativo aqui, porque isso seria um tema para um artigo inteiro, apenas dar uma idéia que existem outras opções no mercado com outros frameworks.

Dentro do ecossistema React existem outras formas de atingir o mesmo objetivo seja com After.js, Razzle ou React-SSR.

Começando com Next.js + Strapi: Boilerplates

Boilerplates são códigos já estabelecidos que permitem começarmos uma aplicação sem ter que setar as configurações do zero.
São muito úteis para sairmos codando nossa aplicação sem perder tempo com instalações e configurações.
Abaixo vou citar algumas que acho boas para começar no universo Next.js e Strapi:

Strapi Next.js Blog Boilerplate (feito pelo time do Strapi)
Next.js Strapi Example ( feito pelo time do Next.js)

Referências:

Em Breve:
Mais artigos sobre o universo Next e Strapi