Next.js Full stack: gerenciando conteúdo em build time com File System

Entendendo o problema - Apresentação

Olá, pessoas. Eu sou Mário Souto, diretamente do canal Dev Soutinho, nessa parceria aqui com a Alura, para trazer para você mais um curso sensacional falando sobre Next.JS, sobre frontend, e trazendo um conteúdo de qualidade.

A ideia desse curso é dar sequência na evolução desse projeto, e você nem precisa ter feito o curso anterior. Eu vou te dar o projeto base. Basicamente, aqui vamos trabalhar dinamizando esse tema.

Vamos começar a sair um pouco da parte só do front, da parte da construção do visual, e tentar partir para preocupações de integração mesmo: como fazemos alguém conseguir dar manutenção nesse projeto, como fazemos alguém conseguir cadastrar um post novo, como podemos reduzir custos nisso, como podemos usar o ferramental que a gente já tem na empresa, sem precisar fazer um novo contrato.

Eu quero trazer várias reflexões na hora de construir esse projeto justamente para conseguir trabalhar tanto essa questão de construir, quanto avançar no lado do full stack, mexendo com o Node JS. Eu vou optar por trabalhar com o File System. Vamos passar por reflexão de alternativas de CMS que temos no mercado, como podemos trabalhar.

Eu posso dar um spoiler, que vamos fazer manipulação de arquivo hard, vamos estar trabalhando junto, vou dar algumas dicas de otimização de coisas em build time, como podemos estar trabalhando, como o Next lida quando você carrega coisas que são do mundo Node JS dentro do projeto frontend, como você faz para não impactar o seu bundle final.

Tem muita coisa que eu vou trazer nesse curso. Eu posso te garantir que tem um conteúdo extremamente legal, tanto para conseguirmos fazer a parte de carregar as postagens, são arquivos Markdown que vamos acabar construindo, a parte de configuração.

Tem muita coisa bacana, muita reflexão mesmo, e eu conto com você no próximo vídeo para começarmos a ver o nosso conteúdo na prática já, mandando bala. Então, se inscreva e bora aprender junto.

Entendendo o problema - Armazenando informações

No vídeo anterior, eu mostrei e já dei um spoiler até de que vamos trabalhar com YAML, com Markdown. Mas eu queria trazer para você um pouquinho, antes, a reflexão de porque trabalhar com diferentes tipos de arquivo e como eu cheguei nessa conclusão para passar o conteúdo para vocês.

Então, é o seguinte: se você for, hoje, abrir essa página do site da Jamstack, que basicamente resume a stack que você teria para trabalhar com site, que ele faz o build offline, ele não depende do servidor para conseguir responder todas as páginas. O site é montado em tempo de build e depois você só serve essas páginas estáticas e tudo mais.

Então, quando a gente para para pensar nesse ponto de que eu quero construir uma aplicação que vai ser estática, tem toda uma preocupação; mas, no nosso caso, eu quero nem dizer que vamos estar sempre construindo uma aplicação Jamstack.

[00: 51] Eu quero te dar a noção de que, muitas vezes, dá para a gente economizar recursos quando a gente explora um pouco mais possibilidades.

Por exemplo, eu trabalhei durante muito tempo com esse CMS, que é o DatoCMS. O DatoCMS tem uma API, você consegue bater nele e conseguir usar, tem um custo que é relativamente ok se você parar para analisar. Mas, na empresa, é complexo você criar um novo contrato.

Então, muitas vezes, se você conseguir resolver o problema sem adicionar um novo contrato ou temporariamente ter uma solução, já acaba sendo um ideal, muitas vezes, no dia-a-dia.

Então, dessa lista de CMSs, tem alguns deles que o pessoal chama não só de headless CMS, mas são Git-based, ou seja, é uma forma de gerenciar conteúdo baseada em usar o seu próprio repositório. Então, você tem arquivos que você que você faz commit, que você versiona, para você conseguir trabalhar com eles.

No nosso caso, eu tenho esses dois arquivos de configuração que vamos estar desenvolvendo ao longo das próximas aulas - fica tranquilo que eu vou te passar o projeto básico. Por enquanto, é zero código. Mas eu queria que você refletisse um pouco.

Por exemplo, quando a gente usa arquivos yaml, eles são usados muito mais para a gente conseguir descrever configurações, eles são mais simples. Você consegue escrever um yamlbasicamente só escrevendo a palavra e usando dois pontos.

Então, a forma de escrita dele é bem simples quando você precisa fazer múltiplas configurações no arquivo. Eles são muito usados para configuração de pipelines, CISD, toda essa estrutura de automação, por ele ser mais direto ao ponto.

E nesse momento, eu sei que você deve estar pensando: "no Javascript, a gente tem o tal do JSON". O JSON é legal também. Eu até peguei a página-base do JSON para mostrar para vocês, que tem toda a descrição da estrutura dele; mas quando a gente para para analisar um JSON, igual o package.json, repara que ele tem muito detalhe e é muito frágil.

Quando eu falo que ele é frágil, eu falo do seguinte ponto: se você esquecer uma vírgula ou se botar uma vírgula no final do item, ele quebra, o interpretador não consegue ler direito.

Então, tem vários detalhes do JSON que acabam dificultando que eu recomende ele como a melhor forma de você guardar conteúdo. Tem cenários que fariam sentido, mas eu acho que, por exemplo - pensando no nosso projeto, em que a gente tem configurações gerais.

Então, se eu for abrir aqui de novo, localhost/3000, se eu guardar as redes sociais, meu nome, meu avatar, faz mais sentido ter isso no YAML, que vai ficar muito mais direto, selecionado e organizado, do que num JSON, que eu posso ter múltiplas chaves, tenho que ficar abrindo e fechando. O YAML é mais direto ao ponto.

Da mesma forma que, se você quiser escrever, por exemplo, um post de blog ou até mesmo os itens que temos nessa timeline que estamos construindo, recomendo muito mais que trabalhemos com o Markdown, porque se você quiser fazer só a listagem das coisas, o Markdown permite que a gente adicione metadados nele, que vamos explorar mais à frente no curso.

Sem contar que, se você for trabalhar só com a parte de criação de conteúdo - se quiser fazer um blog em Markdown, por exemplo - cada vez mais, o Markdown está se popularizando. Até mesmo no WhatsApp, hoje, você consegue mandar mensagens usando o bold, o italic. Então, essa sintaxe está virando algo padrão não só no mundo do desenvolvimento.

E se a gente for parar para olhar, até mesmo em projetos open source. Se eu abrir aqui, por exemplo, um projeto pessoal meu, só com o Markdown - e lendo ele e convertendo para HTML - você consegue fazer coisas muito ricas.

Todas as documentações que a gente vê no Github, por exemplo, usam Markdown, todos os links, a parte de coat, imagem. Tudo isso é feito usando Markdown.

Então, a minha ideia com vocês, ao longo do próximos vídeos, é ensinar como podemos usar o File System no Node para interpretar essas coisas - e, mais importante, arquitetar isso. Como podemos isolar as responsabilidades, garantir que a gente está trabalhando certinho, integrar bem com o type script. Essa é a minha proposta para você.

No próximo vídeo, já vamos começar criando o nosso primeiro YAML, começando essas configurações mais gerais do site, nome e imagem; e o setup inicial do projeto. Então, vejo você daqui a pouquinho. Até mais, tchau.

Gerenciando as configurações - Configurações iniciais

Chegou a hora de começar a botar a mão na massa. Eu prometi que íamos fazer o nosso projeto ficar automatizado, gerenciar o conteúdo e voltar aqui, então temos que começar a fazer.

O que eu fiz aqui agora? Nessa aula, você vai ver que, em https://www.npmjs.com/package/read-yaml-file, você vai baixar o projeto-base, que foi construída toda a parte de estrutura de frontend dele no curso anterior, que você pode ver - mas lembrando que você não precisa fazer ele para conseguir fazer esse aqui, você pode vir direto para ele e fazer igual estamos fazendo agora.

Então, o que eu vou fazer? Vou pegar a pastinha-base que vocês também têm no de vocês - no meu caso, a minha deu uma travada por algum motivo no sistema operacional. Deu certo agora. Eu vou arrastar ela para o meu Visual Studio Code. Tem o projeto inicial aberto, vou deixar a minha tela cheia - que é um ponto importante também, para facilitar a vida.

E agora, o que vou fazer? Eu vou rodar um yarn installe um yarn dev. Basicamente, isso vai instalar as nossas dependências e começar a rodar o projeto. Então, se eu vier aqui no localhost:3000, repara que esse projeto está diferente do que estou mostrando para vocês. Por quê? Porque ele já tem algumas automações de coisas que eu quero puxar.

Por exemplo, a minha ideia é que esse site seja um tema, então você vai poder configurar o seu template, o seu tema - vou chamar de template, que fica melhor - do projeto que você quiser. Então, o nosso template de projeto vai ter um arquivo config. Podia ser um json, podia ser um markdown, mas vou chamar ele de yaml, porque é um arquivo yml, Y-M-L.

Por que estou criando um arquivo yml? Repara que eu quero preencher informações que são gerais desse site. Então, num site, temos o title do site. Então, o title, quero que o padrão seja Mario Souto - Timeline. No caso de vocês, pode ser qualquer outra coisa, pode botar o nome que você quiser. No meu caso, quero que seja Mario Souto - Timeline.

Esses dados, estou pegando baseado no que temos nesse site, só abrir o metatags.io, você vai ver que todo o site, você consegue extrair dele... o Twitter deixa extrair ou não deixa? Só porque fui falar todo site que ele não pegou. Mas eu posso pegar a nossa querida Alura - alura.com.br.

Então, ele pegou. Alura, cursos online. Se eu clicar em "Gerar Metatags", no canto superior direito, repara que ele tem o title do site, o title da página, tem o description e tem várias informações que são metainformações de um site. É importante ter o default dessas metainformações em algum lugar. No caso, optei por esse nosso config.yml.

Você pode até chamar, para deixar mais claro, de template-config.yml, se quiser deixar mais específico. Eu vou até manter assim para ficar um pouco mais do próximo do que você vai estar esperando.

Na descrição, eu posso botar o seguinte: description - estou usando o Copilot para me ajudar, mas agora não quero ajuda dele, então vou desabilitar - e eu posso colocar, por exemplo: "Bem vindo a minha timeline pessoal". Lembrando que esse projeto é para conseguirmos colocar conquistas de trabalho, alguma coisa nova que você fez, que você participou, que você aprendeu, algum link legal que você gostou e quer compartilhar com as pessoas.

A ideia desse projeto é facilitar a você conseguir fazer esse tipo de integração, ter o seu portfólio de coisas que você gosta, que você viu, um log pessoal. É essa a minha ideia com vocês.

Então, qual vai ser o próximo passo? Descrevemos essa parte base do site, eu vou pegar agora, com vocês, algumas informações pessoais também. Então, quero que os dados do meu nome e minhas redes sociais também sejam gerenciadas por esse arquivo. Então, vou pegar um outro nível, que é o personal, e nesse personal, eu vou ter o meu nome, Mario Souto.

O Copilot está funcionando ainda, achei maluco isso. Eu vou colocar o avatar, que vai ser https://github.com/omariosouto.png - esse truque, eu já mostrei para vocês. Se você abrir o link https://github.com/omariosouto.png, vai visualizar a minha imagem - se não mostrei, estou mostrando agora.

Outra coisa também é que eu quero a minha social network, as redes sociais, socialNetworks. Então, aqui eu vou colocar, por exemplo, youtube:, e aí vai ser https://www.youtube.com/devsoutinho. E aí vai seguindo o resto: github, posso botar omariosouto, e assim vai indo. Meio que essa é a minha ideia que queria trabalhar com vocês.

Então, é nós conseguirmos ter esse arquivo inicial e conseguirmos trabalhar com ele no nosso projeto. Então, meu próximo passo vai ser tentar carregar esse arquivo dentro do nosso código. Vou vir aqui em src > screens > HomeScreen.tsx, e vou tentar importar esse arquivo. Então: import templateConfig from "../../../template-config.yml". Repara que está dando um zoom, mas eu posso tentar só dar um console.loge ver.

Se eu passar o mouse em cima de "../../../template-config.yml", ele fala que não conseguiu achar o type declaration. Deve ser o type script, mas vamos tentar importar só para ver o que acontece. Se eu abrir agora, ele falou que deu module parse failed: Label 'https' is already declared. Repara que ele começou a ficar meio estranho.

Ele não conseguiu entender esse https, vou tentar botar como string para ver se ele lê. Carreguei, aparentemente funcionou. Se a gente olhar no nosso console, repara que ele tem um objeto, mas esse objeto não tem nada, ele está vazio por conta do seguinte: por mais que tenhamos conseguido carregar esse arquivo, o import do Node não está pronto para carregar esse tipo de coisa.

Para trabalhar com YAML, deveríamos usar alguma lib para trabalhar com esse tipo de coisa. No caso, a lib que vou trazer para vocês é essa: read-yaml-file, que está no NPM.

Então, no próximo vídeo, vamos começar a usar ela para carregar conteúdo no nosso projeto e começar a não só sair jogando informação, mas arquitetar essa informação de uma forma que fique fácil de se entender, legal de manter, e qualquer pessoa que for mexer não precise ficar pensando muito em como vai conseguir fazer essa interação do projeto.

Então, no próximo vídeo, fazemos a continuação. Vamos fazer todo esse nosso setup virar um objeto de Javascript, mas tudo no próximo episódio desse nosso curso. Nós nos vemos no próximo vídeo, até daqui a pouco. Tchau.

Sobre o curso Next.js Full stack: gerenciando conteúdo em build time com File System

O curso Next.js Full stack: gerenciando conteúdo em build time com File System possui 105 minutos de vídeos, em um total de 35 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:

• Entendendo o problema
• Gerenciando as configurações
• Gerenciamento local de Posts
• Criando o componente de Posts
• Revisão e dicas finais