Next.js: tour pelo Next.js

O desenvolvimento Front-end - Apresentação

Olá, pessoas, eu sou Mario Souto, diretamente do canal “Dev Soutinho” em parceria com a Alura, para trazer para você esse curso sensacional, fazendo uma tour pelo Next.js.

Sim, você não leu errado, vamos fazer uma tour pelo Next. Esse, que é o framework que está proporcionando uma das melhores experiências de desenvolvimento front-end que já tivemos, e a minha ideia nesse curso é tirar aquela dúvida que eu sei que todo mundo tem, que é: Dá para usar Next se eu for fazer um site, se eu for fazer um blog, se eu for fazer um e-commerce? Que tipo de projeto faz sentido usar Next.js?

A minha ideia não é construir um projeto do zero e fazê-lo até o deploy, mas sim ensinar você a entender quais são os cenários que você pode aplicar os recursos do Netx.js, e você, aí sim, conseguir entender e tirar as suas conclusões se ele faz sentido. Vamos fazer essa exploração e aprender mais sobre o Next.js comigo?

O desenvolvimento Front-end - 7 princípios para construir web apps

E antes de começarmos a nos aprofundar no Next.js, e ver código, colocar a mão na massa, eu acho que é importante falar com você sobre alguns tópicos. Eu quero pegar um dos principais artigos, que o criador do Next.js fez, o Guillermo Rauch, e quero pegar também, uma coisa que hoje em dia é essencial para quem trabalha com web, tentando sair um pouco de números mágicos e vindo um pouco mais para métricas, vou falar de Web Vitals com vocês.

Quando trabalhamos com programação, muito se ouve que você tem que fazer um código performático, seu código tem que rodar bem, mas eu acho que a performance pela performance, ela não faz sentido. Se você está otimizando alguma coisa, você precisa ter ciência de alguns pontos antes, que são os seguintes: Você precisa ter um acompanhamento disso, você precisa saber quanto você tem melhorando e você precisa ter noção do impacto que você está causando.

Apagar uma função, criar uma classe, criar menos variáveis, é difícil metrificar essas coisas, são coisas que são complicadas de você entender. E a minha ideia é tentar mostrar no âmbito de web sites, como o Next como ferramenta vai te ajudar nisso, mas guiando em cima das coisas que eu vou te trazer nessa aula agora, e eu vou estar o tempo todo recapitulando e fazendo referências a elas.

Então a primeira que eu vou trazer são os Web Vitals do Google. Que é um conjunto de métricas, em que elas se resumem basicamente 3 pontos que impactam muito a experiência das pessoas usando um site.

O seu site pode até não ser o mais rápido do mundo, o melhor do mundo, mas ele precisa conseguir atingir essa métrica do LCP, em um número bom. Esse largest contentful paint, que é muito relativo, a renderização do seu conteúdo. Não só essa primeira parte, pensa que o seu site, em termos de web e de performance, ele é considerado como se ele fosse um jornal. Então essa primeira parte dele é chamada de conteúdo above the fold.

O ideal é que o seu site pré-carregue esse CSS junto ou um pouco mais que é a segunda parte. Quanto mais rápido você conseguir carregar isso, melhor vai ser a sua pontuação nessa métrica de LCP. Porque quando o seu usuário abrir o seu site, ele vai conseguir deslizar a tela e vai conseguir ver que a aplicação carregou, que ela não está sendo preenchida conforme ele vai carregando, ou a parte de cima está pintada e o resto está com um monte de texto bizarro.

É muito pensado na experiência. Eu vejo muito que as pessoas falam que os apps são muito bons, são legais. Mas se você for parar para pensar, todos os apps têm o LCP bom. Quando você abre um app, muito provavelmente, ele já tem todo o conteúdo pré-carregado, você não sente que as coisas estão sendo muito dinâmicas, a menos que seja uma lista muito grande, como o feed do Twitter ou do Facebook, mas ainda assim lá, você dificilmente vê algo carregando, ao menos que você scrolle muito rápido. No comportamento normal dos usuários, sempre vai ter alguma coisa próxima carregada ali.

E com relação a ter alguma coisa próxima, é importante também essa questão de interatividade o first input delay, o quando que vai demorar para o seu usuário apertar um botão, para ele dar um clique em alguma coisa. Isso é uma coisa que o Google hoje em dia colocou um número, e você consegue medir isso em ferramentas, que eu vou mostrar até o final do curso com vocês.

E a última que eu quero trazer, é o cumulative layout shift, que ele se resume bastante ao seu site não ter aquele comportamento que eu chamo de “pipocar”, que é você abrir um site, e às vezes ele tem tanta propaganda, que geralmente é o que impacta isso, que ele vai descendo o conteúdo, e a pessoa acha que ela vai clicar em um botão de like, e de repente aparece uma propaganda e ela acaba clicando nela.

Então isso impacta bastante. E eu trouxe isso, porque são números, são metrificáveis e eu vou mostrar para vocês uma ferramenta para conseguir, tanto monitorar, quanto conseguir fazer o acompanhamento dessa parte.

Mas eu quero pautar de verdade o que eu vou estar falando, muito nesse artigo no Guillermo Rauch, que é o criador do Next, como eu havia dito. Esse artigo tem 7 anos e ele continua atual. Porque os problemas que ele traz, os pontos que ele cita, que são 7, ele fala que páginas pré-renderizadas não são opcionais, agir imediatamente no input do usuário e várias outras coisas.

E você repara, nem vamos ler o texto agora, vou deixar mais para frente, mas esse “Agir imediatamente no input do usuário” bate diretamente com essa questão do first input delay. Então se o usuário clicar, ele tem que conseguir ter esse feedback claro. Essa parte do pre-rendered pages are not optional, bate bastante com o lagest contentful paint, que é essa questão do carregamento, a página estar pronta quando o usuário baixa.

Eu sei que agora, se você não mexe muito com essa parte de performance, está um pouco abstrato para você, eu estou passando um conteúdo muito mais teórico, mas eu quero deixar para vocês agora de indicação, tanto esse artigo para você ler, vale colocar no Google Tradutor, se você não tiver o conhecimento de inglês, dando uma aprofundada, porque muitos pontos que tem nesse artigo, o próprio Guillermo Rauch trouxe vários exemplos que ele vai explicando como as coisas carregam nos sites.

O curso da Alura de performance do Sérgio Lopes, tem várias dicas, eu até disse isso em outro curso da Alura falando de Next.js, mas nesse vamos falar de muito mais features, vamos nos aprofundar em várias features e ver com problemas do mundo real, pegando casos de e-commerces grandes como a Amazon, sites que têm uma concorrência de acesso muito grande, como por exemplo o site da Mega Sena, como você faz para aguentar essa quantidade de grande requests, alternativas que temos para isso.

Então ele vai explicando cada um dos pontos, eu recomendo a leitura. E caso você curta também, tem a versão da palestra que o Guillermo Rauch deu na BrazilJS, esse post veio da palestra que ele deu, então ele deu a palestra em 2014 e fez esse artigo. E esse é um material que eu queria passar para pautar.

Então vamos falar bastante sobre performance e vamos passar por cada um desses pontos, tentando entender como o Next ajuda a prever o comportamento do usuário, conseguir fazer updates de código quando sem o usuário perceber tanto que teve alguma mudança, enfim. Não vou me aprofundar tanto, senão vou dar spoiler, mas fica ligado, que na próxima aula, já vamos começar com código, vamos fazer uma tour geral para clarear as coisas do Next.js, e depois vamos pontuando cada cenário passo a passo, a partir da segunda aula.

Então fica no próximo vídeo e na segunda aula vamos ter vários casos de uso. Vejo você lá.

O desenvolvimento Front-end - Estrutura de projeto I

Chegou a hora de começarmos a colocar a mão na massa e darmos uma recapitulada para você que já conhece um pouco do Next e para você que não conhece, e ver um pouco dos recursos principais dessa ferramenta, para termos a base para construir um site. E em cima dessa base, vamos adicionar os novos recursos que essa ferramenta tem, que são muito ligados a parte de build, e que vão impactar vários daqueles pontos do artigo dos 7 princípios que o Guillermo Rauch fez.

Então, eu tenho aberto o site do Next.js, cliquei em um link aleatório. Mas basicamente, ele se posiciona hoje em dia como o SDK da Web, ou seja, é o kit de desenvolvimento de software da Web. O que eles querem dizer com isso? Basicamente, eles querem ter uma experiência supernatural e direto ao ponto, para que você consiga criar os seus projetos.

Então eu cliquei nessa parte do “Docs”, eu quero mostrar, primeiro esse get started deles, que tem toda uma parte de setup, explicando como você cria o projeto, tem setup para você criar com TypeScript também, mas é super fácil de converter, eu vou mostrar para você ainda nesse curso como faz para lidar com essa parte, um projeto já pronto, como você converte, então fica tranquilo.

Outra coisa que vamos fazer também é essa parte desse manual setup, porque eu quero que você, que está fazendo esse curso, você tenha controle do que está acontecendo no seu projeto, que você consiga ir se acostumando com o que está rolando e tudo mais.

Por onde começamos? Está vendo que eu tenho esse a1.3? Esse a1.3 é relativo a aula que eu estou agora, então no repositório final, você vai ter várias dicas que eu vou colocar, junto com a pasta de cada uma das aulas. Para cada aula, ponto específico do curso, você vai ter o exato código que eu estou fazendo, para você poder consultar, praticar e tentar criar sua versão enquanto você está acompanhando.

Então vamos começar a criar essa estrutura de projeto. Eu vou usar o NPM para fazermos essa estrutura. Então eu vou acessar essa parte “a1.3”, então cd aulas01/a1.3, que é a primeira parte que estamos tendo código neste curso, é o terceiro vídeo dessa aula 1.

Então vou rodar npm init -y, para darmos um “sim” para tudo, para ele criar essa base do projeto, e eu vou rodar o comando que eu copiei do site, para instalarmos essas 3 coisas.

Logo na sequência ele pede para colocarmos esse monte de scripts dentro do nosso “package.json”, então se o Next está pedindo a documentação, vamos fazer. Então eu vou em “package.json” e vou apagar essa parte de scripts e vou colar tudo que o Next deu e colocar uma vírgula, para ele parar de reclamar.

Outra coisa que eu vou fazer agora, é na raiz, eu vou voltar duas pastas, estou na pasta base do projeto e vou rodar o comando npx gitignore node, só para ele gerar um arquivo gitignore, para eu poder dar um git init nessa pasta, e vocês irem vendo quais são os arquivos que eu estou mexendo sem versionar a pasta “node.modules”. Isso é bem importante.

E vamos tentar rodar esse ”next dev”, vamos ver o que acontece, para começarmos a desenvolver. Então cd aula01/a1.3. Vamos para a pasta “a1.3”, e dentro eu vou rodar npm run dev, vou rodar esse comando.

Ele dá um erro e ele fala que não achou um diretório “pages”. Eu queria até seguir os passos da documentação, e você pode seguir, tem um curso mais básico, que explicamos, mas eu vou basicamente só copiar esse componente de bem-vindo que ele sugere para colocarmos na pasta ./pages/index.js, e te mostrar que todo o setup do Next e feito para melhorar sua experiência.

Então ele vai facilitar, vai ter tudo documentado, fácil de você passar para alguém novo que chegar no seu time, isso ajuda a diminuir o tempo de onboarding das pessoas, porque a estrutura base do seu projeto está documentada, você passa pela documentação, está lá, funciona, prático e ela usa em cima.

Então eu vou criar a pasta “pages” desse nosso projeto, e vou criar o arquivo “index.js”. E vou colar esse homepage.

Só por questão de indentação, eu vou criar um outro arquivo chamado de “editorconfig”, vou criá-lo. Eu tenho uma extensão que gera, por isso eu consegui gerar clicando com o botão direito do mouse, mas você pode procurar por “editorconfig”, instalar no seu editor de código, e ele vai trazer para você.

Isso é só para ele padronizar para mim, que eu quero sempre usar o espaçamento de 2 e que ele sempre coloque uma linha a mais no final do arquivo, que é mais um padrão para o GitHub ficar sincronizado, meio que padrão. Mas já vai estar pronto para vocês, você pode só copiar esse arquivo que vamos passar para você também.

Então fizemos o nosso “editorconfig”, agora, eu vou formatar esse documento, e vou tentar de novo rodar no terminal npm run dev. Eu vou no navegador, e vou colocar “localhost:3000”.

Abri, ele já nos trouxe “Bem-vindo ao Next.js!”. Nesse curso eu não vou criar nenhum app com vocês, eu só quero mostrar coisas comuns que temos app. Então, por exemplo, todo projeto é muito comum você ter mais de uma página. Então para criar home, criamos o index. Se eu quiser criar mais uma página, eu crio um novo arquivo, por exemplo, a página “sobre.js”, o nome é sempre o nome que queremos acessar na URL, então vai ser o /sobre que vamos criar agora. E tudo que precisamos fazer é ter essa mesma estrutura.

Então a function SobrePage() {, ficou uma mistura de “portuinglês” muito boa, e embaixo eu faço export default SobrePage;. E fazer embaixo da function return {, e embaixo uma div de Você está na página Sobre.

Perfeito, está bonito, está tranquilo. Então se eu der um “F5”, estou na página /sobre. Então temos a sobre e o “Bem-vindo a Next.js”. É nesse nível de padronização que o Next vai trazer as coisas para você.

Outra coisa que eu queria mostrar para vocês e mostrar, é que se você quiser ter uma página 404, é muito comum os sites terem essa página tendo algum joguinho, alguma coisa assim, ou só para contabilizar a quantidade de pessoas que estão caindo na página 404 no seu site.

Então para cair na página 404, você precisa digitar qualquer coisa na URL, então você digita qualquer coisa e cai.

O Next, por padrão tem uma dele, que ele carrega para você, mas você pode, tranquilamente, criar um arquivo “404.js”, dentro dessa pasta “pages”, vou copiar essa estrutura que ele sugere para customizar.

De novo, é só um componente com export default, se eu salvar esse arquivo e voltarmos para o projeto, ele carregou o que colocarmos, o nosso arquivo, “404 – Nosso arquivo do curso”.

Então nessa brincadeira, já estamos vendo bastante coisa, já vimos criar páginas, como customizar a página 404, e dá para colocarmos muito mais coisas, porque já vimos a parte do setup, essa parte da página 404, e podemos customizar até algumas coisas mais gerais da aplicação, como por exemplo.

Eu abri esse link da documentação, esse “custom App”, que se você procura sozinho, você não entende para que você vai usar isso. Vou dar um problema para você: Temos a home, a página sobre a nossa página 404. Repara que a fonte está feia em cada uma dela, poderíamos tentar padronizar, colocar uma fonte sem serifa, sem ter essa base em todas as nossas páginas. Para fazer isso, precisamos ter um componente que abrace todas as páginas que temos. É aí que entra o tal do App.

Para usá-lo, tudo que precisamos fazer é: Dentro de “Pages”, criar um arquivo “app.js”. Então vou fechar tudo que eu tenho aberto, vou criar o arquivo “app.js”. Dentro eu vou copiar essa estrutura que o Next me sugere.

E somos livres para colocar qualquer estrutura que quisermos. Eu vou colocar um fragmento, que é basicamente abrirmos e fecharmos a tag, sem colocar nada, para poder colocar Texto em todas as páginas. Colocando isso, depois colocamos embaixo export default MyApp.

Então só fazendo esse export default, já conseguimos ter o nosso Sobre com o texto em todas as páginas, esse texto que eu coloquei, conseguimos ter a nossa home com esse texto e até a nossa página 404.

Então ficou bem genérico. Para aplicar um estilo, basta escrevermos uma tag style dentro. Então eu posso colocar </style>, e podemos colocar, por exemplo, que todo mundo vai ter o font-family: sans-serif.

Vou salvar, e repara que ele quebrou. O que fazemos agora? Isso acontece, porque dentro de um arquivo React, usar essas chaves representa que você quer trabalhar com alguma coisa que é dinâmica, então ele espera que isso fosse como se fosse um espaço para colocar uma variável. Para colocar uma tag style no meio do Next, você tem que recortar esse código, a tag vai ter que ter duas coisas, ela vai ter que ter uma chaves e uma template string.

A partir desse momento, qualquer coisa que eu escrever dentro, vira um estilo válido, ele parou de reclamar no terminal, sempre importante olhar no terminal para ver o que está acontecendo. E agora, ele aplicou o CSS que criamos. Se eu inspecionar, repara que ele colocou esse estilo acima da nossa div da home.

Se eu for na nossa página sobre, ele colocou acima da página sobre. Então ele está mantendo esse padrão para conseguirmos aplicar os estilos e trabalhar em cima dessa estrutura base que temos na página.

Agora, a minha ideia é mostrar para você, não só essa parte do Custom App, mas mostrar também que podemos customizar até a tag document, até essa parte mais externa, como vai renderizar a tag body e tudo mais.

Tudo isso já tem na documentação também. Então, para terminarmos essa aula, eu vou mostrar essa parte do documento, e vou deixar um gostinho para você ver o que vamos quebrar na próxima.

Então eu vou copiar essa parte desse document que temos, você deve achar estranho que estamos copiando um código, mas isso é um código do framework, não tem muito o que fazer. Você vai copiar essa estrutura, respeitá-la e customizar conforme você precisa. Por exemplo, é muito comum em um site, na tag do HTML você dizer qual é o lang do site, você dizer que o site é em português, o site é inglês. Então esse tipo de coisa vamos passar nesse arquivo “_ documento.js”.

Então vou criar esse arquivo, vou colar essa estrutura. Se formos olhar no projeto, não mudou nada. Mas agora, conseguimos colocar o lang nessa tag no meio do HTML, consigo colocar lang=”pt-BR”, por exemplo. Salvando isso, aplicamos o lang.

Então você vê que nesse vídeo conseguimos aprender a criar uma página, basta colocar dentro da pasta “pages” um arquivo e o nome dele vai servir como índice, o index é a home, todos os outros, como home, contato, vai ser só colocar o nome .js, vimos como criar a página 404, também vimos como colocar algo que fique em volta de todas as páginas. No React e muito comum ter providers, tema, outras configurações que ficam mais externos nessa parte do app, inclusive nesse curso você ainda vai ver um outro caso usando uma lib, mais próximo do dia a dia.

E para poder mexer na estrutura inteira do HTML do Next com o React, usamos esse arquivo “_document”, onde você importa vários componentes do Next que estão prontos para se integrar no meio do processo de rodar as coisas dele, mas que permitem que modifiquemos as coisas, estendermos e fazermos o projeto ter a nossa cara, ter a nossa identidade.

Então, esse vídeo vai ser quebrado em duas partes, eu vejo você no próximo, que é para mostrar para vocês como podemos fazer um pouco do roteamento nessa parte mais dinâmica, como podemos fazer para conseguir ter uma página que tem um ID específico ou fazer link entre páginas. Vamos fechar essa primeira aula vendo esse conteúdo que é super importante e todo mundo precisa. Até daqui a pouco.

Sobre o curso Next.js: tour pelo Next.js

O curso Next.js: tour pelo Next.js possui 172 minutos de vídeos, em um total de 39 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:

• O desenvolvimento Front-end
• Páginas com Next.js
• Recursos adicionais do Next.js
• Next.js é framework FullStack?
• Dicas finais e deploy