Next.js: trabalhando com um CMS

Headless CMS e Front ends modernos - Apresentação

Se você tem vontade de trabalhar com Next.js, e alguma ferramenta de CMS, tal como o DatoCMS, que inclusive, é uma das recomendadas, até usadas pelo pessoal da Vercel, chegou a hora de você aprender comigo, aqui na Alura, 100% focado em arquitetura, princípios de front-end, a ideia de passar todo o conteúdo de como integrar uma aplicação front-end com um Headless CMS, que são esses CMSs diferentes do WordPress, por exemplo, que é acoplado com o site, essa estrutura em que você tem o CMS do lugar e o front-end, o client do outro.

Em que você tem diferente pessoas de produto usando a ferramenta de CMS para popular não só o site, como o aplicativo, como uma Alexa, enfim, tem N possibilidades, e a ideia é literalmente passar por essa parte de arquitetura, como lidar com o conteúdo global, como lidar com conteúdo específico, como lidar com a parte das páginas, como fazer os componentes se integrarem com o CMS. Olha que coisa doida.

Até chegar em um ponto de você conseguir, pelo CMS, alterar a ordem o site, poder dar autonomia para o pessoa de produto a fazer algumas coisas em algumas páginas, e você como Dev, usar o CMS para separar bem o conteúdo, até quem sabe te ajudar a fazer alguma1s páginas mais complexas.

Bom, tem muita coisa que eu quero falar, mas eu quero deixar o meu convite para você vir aprender comigo, oferecendo nesse projeto, que é uma versão simplificada da Alura, uma versão bem simples, mas que tem uma home, tem um rodapé, tem uma página de perguntas, tem um FAQ, tem diferentes problemas, em um cenário que está mais controlado, mas que vai te ajudar a conseguir escalar, e eu trago vários exemplos, para uma página maior, uma página menor, como pode funcionar, como funciona se você for crescendo, como organizar isso.

Então, a ideia é aprender uma fundação que vai funcionar para você conseguir dar os seus passos e ir evoluindo conforme precisar. Topa aprender junto comigo? Vejo você daqui a pouco.

Headless CMS e Front ends modernos - Por que usar um CMS?

Bom, chegou a hora de falarmos porque usar um CMS. Eu te mostrei no começo, falando das vantagens de qualquer pessoa poder olhar uma ferramenta que descreve que tem a home do projeto, eu quero alterar o title da página que reflete em SEO, ou eu quero mudar a posição das coisas, deixar o footer antes do hero.

Até deixando mais claro, tem a própria imagem da home. Então, mudar a ordem das coisas é uma coisa que queremos fazer no dia a dia, e podemos fazer isso com o código, só que muitas vezes, principalmente conforme a empresa vai crescendo, o time de desenvolvimento começa a ter outras necessidades, então, às vezes você precisa finalizar uma funcionalidade, lançar um recurso novo, fazer uma migração.

Então, é bacana que algumas páginas que têm tendência a mudar mais, principalmente páginas de marketing, ou até algumas telas que você quer dar mais liberdade para algum gerente poder montar o próprio relatório, poder montar a visualização dele, é nesse momento que o CMS entra.

E durante muito tempo, ficamos meio que estigmatizados, que CMS era WordPress. Estou até com o site do WordPress aberto. Então, o CMS é WordPress, que é uma ferramenta que vai te ajudar a gerenciar o seu site, normalmente você vai criar um blog, mas mesmo o WordPress, o pessoal usa para fazer e-commerce hoje em dia.

É claro, que talvez ele não chegue ao nível de escalabilidade de um Mercado Livre da vida, ou outro mega e-commerce que temos, mas muito provavelmente ele vai suportar boa parte das pessoas que estão abrindo suas lojas, e querem começar a vender online, e ter a própria loja, e um marketplace, poder ter essa parte da presença online.

Então, ele vai dar esse suporte, ele vai funcionar, não estou aqui para falar de escalabilidade, nem nada, até porque o meu ponto é falar sobre como o CMS ajuda quem não consegue programar. Então, o CMS entra como uma ferramenta para ajudar aquela pessoa do time de marketing que quer mudar um texto, sem ter que mexer com o código, ela acaba virando uma ferramenta que vai facilitar a comunicação e vai dar tempo para o seu time de desenvolvimento conseguir desafogar um pouco o packlog daquelas tarefas de mudar um texto, arrumar alguma coisa.

Esses ajustes menores, você dá poder para outras pessoas fazerem, e essa é a principal vantagem de usar um CMS. E hoje em dia, acabamos tendo até dois tipos de CMS, um é o estilo Wordpress, que você sobe um site, e você gerencia o conteúdo e o site está junto com essa ferramenta de gerenciar conteúdo, e a abordagem que eu vou trazer para vocês é usando esse tal do Headless CMS.

Que a lista é muito grande, tem muitos mesmo, você pode usar vários, e é claro, existem alguns mais populares, e a ideia é mostrar para vocês soluções que não vão estar acopladas diretamente, então, a forma como vamos criar o nosso conteúdo, no caso, o CMS que vamos usar, é o DatoCMS.

Inclusive, o pessoal da Vercel usa ele, que é o pessoal por trás Next. Quando você vai na parte do login tem até uma mensagem do CEO da Vercel, o Guillermo Rauch.

Então, a ideia principal de um Headless CMS, diferente de um WordPress, é que ele não vai ter o site acoplado. Basicamente, conseguimos ter o poder, por exemplo, de ele ser a central que vai fornecer conteúdo para um aplicativo, para uma Alexa, para sua loja, para o seu Chatbot, para o seu site, literalmente, tudo que está na home do site deles.

E a vantagem é essa, não só o pessoal do marketing, ou o pessoal de copywriting, ou o programador mesmo vai mexer, como qualquer pessoa pode tirar vantagem disso. Você como front, vai ter vantagem, de aquela página que muda menos, aquela página que está um pouco mais estruturada, ela vai conseguir se encaixar nesse modelo de CMS, e vai dar para trabalhar no DatoCMS.

Então, esse é um dos principais motivos para usarmos CMS. O DatoCMS é super legal, porque ele trabalha com um GraphQL, que é uma tecnologia que permite pegarmos exatamente o conteúdo que queremos. Então, por exemplo, no WordPress, como ele está integrado, se você puxou um título da sua página, você quer só o título, você não quer todo o conteúdo, então, você pode dizer no WordPress quanto conteúdo você quer pegar.

Mas isso porque ele está tudo junto. O WordPress tem uma API, só que a API do WordPress, quando você pede o conteúdo, ela traz tudo, não tem um filtro. Até dá para você fazer, mas não é uma coisa padronizada. E o DatoCMS deixa você pedir exatamente o que você quer. Então, se você quer só o título da página, você traz só o título da página.

Eu posso até mostrar para vocês, tem uma parte dele que conseguimos ir explorando os conteúdos. Isso vocês vão ver mais nas próximas aulas, mas basicamente, eu consigo fazer uma busca para o item de FAQ, uma pergunta frequente que acontece, colocar filtros, tem regras para colocar. Tudo isso vamos passar junto.

Muita coisa, o próprio DatoCMS tem esse “Explorer” que vai te ajudando a construir a consulta de dado que você quer fazer. E com um pouco de guia do começo, que eu vou passar para vocês, vai ficar fácil de você conseguir fazer depois no dia a dia outras consultas. Claro, fica fácil treinando praticando e se aprofundando no conteúdo.

E eu peguei um pouco nessa questão agora, do peso do conteúdo, porque trabalhando com web, temos que nos preocupar bastante com o peso dos nossos sites. Tem um site que eu gosto muito, que é o HttpArchive, que ele mostra bastante como está a média hoje em dia. Então, você pode tentar ir olhando quão pesado está o seu site, você consegue trazer mais conteúdo, menos conteúdo, como otimizar tudo isso.

Tem alguns detalhes trabalhando com o Next, mas vamos ver isso quando formos começar a trabalhar com o nosso projeto, que vai ser na próxima aula, organizando, vendo algumas coisas. Então, até já.

Headless CMS e Front ends modernos - Nosso projeto e criando a conta no DatoCMS

Finalmente chegou a hora de começarmos a ver o código na prática. Então, você teve um gostinho de como é um projeto, porque vamos usar um CMS, qual é a principal vantagem, o DatoCMS, o Next, que você já conhece, se você está aqui, é porque você já conhece o Next.js, eu vou esperar isso um pouco de você. Pelo menos o curso inicial, a parte de criar o projeto, de manipulação básica mesmo, criar uma página, mexer com componentes, espero que você saiba disso.

Porque para ganharmos tempo, para o foco ser realmente, trabalhar com o DatoCMS, eu já trouxe uma estrutura de projeto que está aberta no meu VS Code agora, e que é uma pasta simples, alguns arquivos, um pouco de configuração do Next.

E basicamente, foi até gerado um arquivo do Mac, eu vou apagar, não é importante para o momento. Mas basicamente, esse projeto segue a estrutura padrão de um projeto Next. Então, ele tem dentro da pasta “pages”, as páginas que temos, algumas configurações do style de components, que tem na documentação da Vercel, no próprio repositório deles, nos exemplos, está totalmente inspirado nos exemplos que eles têm lá.

Tem a nossa página do FAQ, cada pergunta do FAQ. Então, o import está aqui. Vamos ver na prática, para começarmos a mapear as coisas. Então, eu vou abrir o meu terminal dentro do VS Code, repara que eu já estou rodando o projeto com o comando yarn dev, pode ser npm, depende de como você quer usar.

Então, vamos para a porta 3000. E olha que bacana, abriu a home, então essa página da home está sendo carregada a partir de ‘../src/screens/HomeScreen’. Se você der um “Ctrl” e clicar, ele nos joga para dentro de “Sources > screens > homeScreen”. Então, o caminho está meio esse. “Screens” são as telas que temos, “Components” são os componentes mais comuns que temos.

E dentro de “Tema”, tem uma estrutura de componentes que eu fiz, só para agilizar a parte de criar o layout e trazer o projeto para vocês. Então, basicamente, o que eu tenho é uma “homeScreen”, em que eu defino o title dela, que está como FAQ – Alura, deveria ser Home – Alura.

Lembrando que esse exemplo corrigido como Home – Alura agora, você vai baixar no link que está na descrição, no meu perfil do GitHub “omariosouto/04-nextjs-course”. Tem esse nome todo, mas é a parte de CMS.

Então, tem “Mergulhe em tecnologia!”, “Você vai estudar, praticar, discutir...”, então, todo os pontos que eu trouxe no código, vocês podem ver que eles estão na tela, então, se eu apagar essa exclamação no código, ela some na home também, se eu voltar a exclamação, ela volta também, então, está interligada. E nossa meta vai ser converter todo esse projeto para ele rodar via DatoCMS.

Não rodar, mas podermos puxar os conteúdos de lá. Quem trabalha com essa parte de criação de conteúdo, poder mudar como as informações carregam, como as coisas vão aparecer, o que aparece, o que não aparece, enfim, tem um monte de coisa que dá para fazermos. Esse é o ponto inicial que estou querendo trabalhar com vocês.

Então, tem até a pergunta, por enquanto, todas as perguntas tem esse fake title, porque não está interligado com o CMS, parte do nosso trabalho vai ser interligar isso, e vai ser um desafio bem bacana de trabalharmos juntos.

Então, por ora, eu vou junto com vocês, aproveitar e até criar a conta no DatoCMS, para vocês verem que não tem nenhum mistério. Então, primeiro de tudo, eu quero garantir que vocês vão conseguir tanto baixar o projeto, quanto conseguir criar essa conta, essa é a minha meta.

Então, vamos lá, na home de DatoCMS, eu vou clicar em “Enter dashboard”, primeiro passo. Nesse “Enter dashboard”, eu tenho até uma conta minha que já estava, eu vou fazer um logout dela. O depoimento do Guillermo Rauch, o CEO da Vercel, que gosta bastante do DatoCMS, e clicamos no “Sign up”.

Então, eu vou colocar, por exemplo “Mario Souto” em “First name”, “DevSoutinho” em “Last name”, o e-mail eu vou pegar um temporário, no caso, você vai usar o seu e-mail mesmo. E no campo “Company”, eu vou colocar “Alura”, e a senha eu vou colocar uma que eu acho segura. Vou dar um “Sign up”, e pronto, é isso que você vai ter que fazer.

Então, essa parte é o setup básico que vamos ter que ter. Agora, vamos criar dentro dele, o projeto que vai representar esse nosso site. Lembrando que a proposta do DATO é que você pode ter um projeto que representa o seu app, o seu chatbot, então, analisa bem o conteúdo que vamos aprender, para você depois aprender a criar a sua parte de gestão.

Então, no caso, eu vou criar um blank Project, você pode criar um demo, se quiser, para ver como o pessoal do DATO sugere. E de nome eu vou colocar “Alura DevSoutinho”, então, seria a versão da Alura do DevSoutinho, unificado para o nosso projeto. Então, eu vou criar o projeto.

Ele passa para a tela de projetos com o nosso projeto “Alura DevSoutinho”, então, se eu clicar agora, ele mostra o nome, o ID do projeto, ele gera um domínio para ele, então, é legal você colocar “Alura” e o seu nome ou o seu usuário do GitHub, algo do gênero, só para garantir. Depois que eu cliquei no projeto, eu vou clicar em “Enter Project”. E uma vez que eu entro, ele traz um monte de informação.

No começo, você vai ignorar tudo, não vai olhar nada, não foca em nada. Basicamente, ele dá uma estrutura para trabalharmos com conteúdo, ele tem a parte de mídia, tem a parte de explorar API, que vocês viram anteriormente comigo, tem a parte de definições. Então, inicialmente, o que eu quero fazer com vocês é tentar trazer para dentro do DATO um pouco dessa parte que temos das perguntas e categorias, de eu tentar mostrar como vamos poder cadastrar um pouco disso dentro do DATO, para darmos sequência na próxima parte de preencher essa página interna.

Então, vamos lá. Basicamente, tem a categoria, que é a da parte de cima, e na parte de baixo eu tenho outra categoria, e mais para baixo eu tenho um post dela. Então, temos que declarar para o DATO que o nosso projeto tem isso dentro dele. Como fazemos isso? Muitas vezes não fazemos isso, mas é importante ler. Ele fala: “Bem-vindo! Vamos dar forma a esse backend”. Ele chama de back-end, porque é a parte que vai ter os conteúdos, o mais próximo do banco de dados.

Então, ele fala: “Artigos, produtos, categoria, membros da equipe... Que tipo de conteúdo é feito o seu website?”. Vamos lá. Então, vou clicar no “+”, e eu vou colocar um padrão que eu uso para o meu projeto. Então, isso vai ser uma parte de conteúdo, então, vou chamar de “Content”.

Eu coloco uma seta para diferenciar, porque você pode ter múltiplos tipos de conteúdo, você pode ter páginas, você pode ter algum tipo de conteúdo específico, então, você pode ter uma mistura. Eu gosto de classificar desde o começo, que é para não ter dor de cabeça depois renomeando, dando problema. Então, segue esse padrão que eu vou passar para você, que ele vai fazendo mais sentido conforme formos evoluindo. No começo, eu quero só poder cadastrar essas informações, depois pensamos como puxamos para as páginas e tudo mais.

Então, é o “Contest - FAQ Question”, vai ser uma pergunta do FAQ. Repara que ele tem todo um lance de não colocar plural, então vamos seguir o que ele tem. E ele colocar “Instância única”. Não marque isso, por enquanto, nas próximas partes vamos ver, deixa desmarcado mesmo.

Temos um sistema de rascunho que vamos trabalhar também ao longo dos próximos vídeos. Tem o “Presentation”, não vamos mexer também, basicamente é só guardar.

Então, isso para nós, vai representar uma pergunta. Então, a pergunta vai ter que ter um título, o conteúdo da pergunta e qual categoria ela pertence. Faz sentido? Então, para poder ter qual categoria, precisamos dizer também que temos a categoria. Então, vamos colocar o nome “Content – FAQ Category”. De novo, do mesmo modelo, não é instância única, “Guardar modelo”.

Vamos voltar agora. A categoria só tem o título dela, e os posts que ela tem. Então, vamos declarar isso dentro do DATO. Então, literalmente clicando em “Adicionar novo campo”, você consegue ir adicionando informações a esse tipo de conteúdo. Então, eu cliquei, eu vou colocar que ele vai ter um “Title”, e vou guardar o filtro. Coloquei um campo de title.

Vou adicionar outro, vou adicionar um link para as questões que temos. Então, podemos ir em “Adicionar novo campo > Links > Múltiplos links”, e o nome dele vai ser “Questions”, são as perguntas. E “Guardar filtro”.

Então, já está tendo alguma referência. Eu vou até editar o campo “Questions”, porque nas validações temos que dizer para quem ele faz referência, no caso, ele faz referência para a parte de perguntas, dentro de “Validações”, eu vou colocar o “FAQ Question”.

Isso é meio o padrão de como usamos a ferramenta, não tem muito o que fazer. É mais só seguir mesmo. Quando eu coloco isso, ele mostra que o “Questions” aponta para o “FAQ Question”, se clicarmos nele, ele abre o nosso modelo. Então, vamos descrever o que tem em uma pergunta. Então, uma pergunta também tem um título, então, voltamos e dizemos que a pergunta tem um title e vou guardar o filtro.

Agora, eu vou adicionar outro campo para a parte de conteúdo, e vou usar o mais bonito, o de texto estruturado. Dentro desse de texto estruturado, podemos dar o nome dele de “Content”, por exemplo. Simples e direto. E “Guardar Filtro”.

Podemos também dizer que a pergunta aponta para uma categoria. Então, podemos ir em “Adicionar novo campo”, podemos colocar em “Links > Múltiplos links”, e nas “Validações”, vou colocar uma só, na verdade, só para vermos diferente. Então, o nome vai ser “Category”, então, qual categoria que é esse post, e nas validações colocamos que é “Content FAQ Category”, então, estou linkando um conteúdo no outro.

Estamos fazendo via banco de dados, seria o tal do relacionamento. Só que estamos montando via tela. Lembrando que isso não é mais ou menos performático, não estou entrando nesse detalhe. Para escalar a forma como você integra isso, o próprio Dato tem estruturas, ele teria uma ferramenta que ele tem o plano inicial gratuito, depois um plano pago, então varia bastante de como você vai usar no seu dia a dia.

Mas o foco que eu quero te passar, é como você vai arquitetar. Então, independente do Dato, o que eu vou te passar, é você se virar com qualquer uma das ferramentas que você pode usar no seu dia a dia. Então, segue em frente com isso. Então, vou na parte de conteúdo, e ele nos trouxe tanto a parte de pergunta, que podemos criar um novo registro, quanto a parte de categoria.

Eu vou começar pela categoria. Então, “Criar novo registro”. Então, vai ser “Por onde começar”. E eu vou clicar em “Guardar”. Acabei de criar uma categoria, se voltarmos em “Content – FAQ Category”, já temos a categoria.

Se eu clicar nela de novo, clica no “Questions”, ele não dá nenhuma opção. Podemos criar “Novo Content – FAQ Question”. Quando abrimos, podemos preencher o título, e dentro de “Content” temos suporte a escrever em markdown. Então, posso colocar um h2, ou posso colocar “Título principal”, por exemplo, e embaixo “lista de itens”, embaixo “Outro item”, embaixo “Parágrafo normal”. Se eu colocar a barra, ele sugere o que você pode colocar. Tem várias coisas.

E no final, eu posso marcar a categoria “Por onde começar”, que é a que estamos colocando. Vou clicar em “Guardar”, e na outra “Content – FAQ Question” também. Então, por meio da categoria, repara que já preenchemos uma pergunta, e temos as categorias preenchidas também.

Eu posso criar outra categoria, podemos ir em “Formações e projetos”. “Novo registro”, e “Guardar”, e dentro dela esse do “Qual a diferença do certificado”. Podemos ir em “Novo Contente -FAQ Question”, colocar o título que copiamos, e em “Content” colocar “Conteúdo aleatório” e a categoria vai ser a do “Formações e projetos” e “Guardar”.

Repara que ele ficou uma lista um pouco feia. Podemos deixar mais bonita clicando no nome que está na direta do “Questions”, ele nos traz de novo para a parte do modelo, e podemos editar a apresentação desse campo, e tem “Vista compacta” e “Vista expandida”, eu vou salvar isso.

Se voltarmos para a parte de conteúdo e for ver o FAQ, ele mostra as perguntas de uma forma um pouco mais bonita. Então, para quem vai gerenciar o conteúdo, vai até ser melhor desse jeito. E ele é super aberto para você customizar e ir explorando os campos. O Dato, como ele é uma ferramenta mantida, que está em constante evolução, você pode alterar do jeito que você achar melhor.

Então, acho que essa foi uma primeira boa introdução ao tema, como podemos trabalhar com ele. E nos próximos vídeos vamos começar a trabalhar integração, principalmente com essa página interna, para conseguirmos pegar os conteúdos, usando esse API Explorer, em que você vai entender como esse Json está vindo, como puxamos ele, o que precisamos fazer, enfim, vai ter bastante coisa legal, vejo você nas próximas aulas. Até daqui a pouco.

Sobre o curso Next.js: trabalhando com um CMS

O curso Next.js: trabalhando com um CMS possui 193 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de Next.JS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Headless CMS e Front ends modernos
• Setup inicial do Dato CMS
• Indo além na integração com o CMS
• Automatizando suas páginas
• Dicas finais