O que é Next.js, na prática, em 15 minutos!

Olá tudo bem Aqui é o Luiz e no vídeo de hoje nós vamos aprender em 15 minutos o que que é o nexts para que que ele serve e vamos criar uma primeira aplicação no nexts para você sair do zero nesse assunto e começar a estudar sobre tá sendo cada vez mais requisitado nas vagas de emprego porque auxilia muito em diversos tipos de projetos Então vamos lá [Música] então primeiro ponto que que é o nexo GS o react ele é uma biblioteca de frontienge correto o que que é uma biblioteca ele fornece ferramentas para a

gente construir prontos ele não fornece uma estrutura de projeto para gente ele é todo pelado vamos dizer assim você vai ter que ficar falando de dependência qualquer coisa que você tem que fazer já o nexo GS ele é um Framework para reacts é uma estrutura básica para projetos reaft GS então ele vai utilizar o react ainda sei lá 90% que você aprendeu de react até hoje você vai aproveitar os projetos next Mas ele tem algumas particularidades próprias dele como por exemplo por ser um Framework ele já vir pré-configurado com uma série de coisas dentre elas

por exemplo o roteamento pré-configurado enquanto no react você tem que instalar por exemplo o reactredom para fazer o roteamento de páginas no next já vem para instalar da parte roteamento entre outras coisas mas esta é uma aí bem gritante a diferença bem gritante que eu já posso ressaltar e outra diferença também bem forte do Next é que ele vem acha a principal utilidade vamos chamar assim dele principal motivo pelo qual as empresas utilizam ele com projetos É principalmente em projetos react que são áreas públicas que não são áreas logadas porque porque o react ele é

um single page application certo ou seja ele é uma única página HTML que através de muitos jovens script fica mudando o conteúdo no entanto por ser uma Spa os mecanismos de busca não conseguem indexar corretamente as aplicações em react isso melhorou muito nos últimos anos mas ainda tá muito longe né de competir com páginas mais tradicionais que o conteúdo tá ali para o robô conseguir ler conseguir entender e tem várias páginas né essas páginas que os robôs conseguem ler com facilidades são as páginas que a gente chama de renderizadas pelos servidor né onde você utiliza

alguma tecnologia de servidor para renderizar como o node JS como aspinet como PHP ou você cria arquivos HTML estáticos mesmo né enquanto que no caso das Spa não tem essa renderização do lado do servidor tudo acontece no navegador do usuário depois que os arquivos são baixados então nas aplicações que exijam uma renderização do lado do servidor para que os mecanismos de busca consigam integrar melhor compreender melhor consequentemente indexar melhor né o que afeta diretamente aí o seu s ou nessa otimização para mecanismo de busca o nexts oferece esse recurso para aplicações react então a sua

aplicação react Ao invés dela ser toda construída no navegador do usuário ela já é construída ela já é Render no servidor e quando é entregue para o usuário já é tudo entregue do jeito que tem que ser tudo construído bonitinho assim como teria sido feito com outras tecnologias de renderização no lado do servidor esse processo a gente chama de ssr que é o serverside rendering e é algo aí muito desejado novamente em projetos de área pública né de que não seja área logado no caso né mesmo em projetos de área logada você ainda pode colher

alguns benefícios de trabalhar com nexts ligados aí a performance e também ligados essas pré configurações como mencionei por ele ser um Framework e não apenas uma Lib e novamente como o nexts usa o react O que você aprendeu de react você não vai perder então a gente vai fazer aqui uma evolução dos projetos e ética que a gente já vinha fazendo adicionando aí este frame aqui no nosso centro de utilidades porque ele tá sendo cada vez mais exigido pelas empresas assim como no caso do react nós temos uma aplicação utilitária que cria já os projetos

para gente no next Nós também temos o utilitário Create next app Então a primeira coisa que você vai fazer quando você for Criar o seu projeto nexts é utilizar esse utilitário para criação da aplicação Então vamos lá então você vai abrir a janela de terminal na pasta onde você vai querer Criar o seu projeto certo e você vai executar o comando npx para ele baixar e executar um pacote este pacote eu Create traço next traço app certo que é o utilitário para criação de projetos next GS e na sequência o nome do projeto o meu

projeto aqui eu vou chamar de dep nft porque ele é um depi nft é uma aplicação dessa centralizada uma aplicação web 3 para uma coleção de nfts Mas você pode criar eu que você quiser no nome que você quiser beleza a primeira vez que você executar Esse comando Talvez ele pergunta se você quer instalar o Create app pode confirmar não tem problema nenhum no meu caso aqui né Eu já usei outras vezes utilitário então ele não vai perguntar a mesma coisa tá mas ele faz algumas outras perguntas para mim primeira pergunta você gostaria de utilizar

taip script com esse projeto tá o padrão É sim segunda pergunta você gostaria de usar s20 com este projeto aqui é para já vir pré-configurado um líder de código então analisador de código ali de regras de código né para te ajudar a manter o seu código mais padronizado cometer menos erros certo padrão É sim próxima pergunta você gostaria de utilizar o diretório src com este projeto aqui é uma questão de organização de pastas tá Eu recomendo sim que é o padrão para essa pergunta depois ele pergunta se você quer usar um diretório experimental app o

padrão é não tá É você seguir com este não aqui depois ele pergunta qual aliás de importação você quer configurar vou seguir com o padrão aqui certo e tá aqui o que ele fez inicializou o projeto com template e agora ele tá instalando essas dependências aqui react react Don next eu escolhi taip script certo e aí todos os types Eu também escolhi s20 então ele está excelente e a configuração de a seguinte para Nexus certo então aquele baixou todos os pacotes para a gente isso aí vai variar conforme a sua velocidade de Internet certo e

agora eu tenho aqui ó dep nft você não deve utilizar o projeto desse jeito aqui tá com um monte de projetos juntos porque dá um monte de erro e a gente não sabe o que acontece direito então o ideal é você fechar o vs code e abrir sempre somente a pasta do seu projeto next que é para não ter nenhum tipo de problema se não ele se perde ali com as pastas Então vou naquela mesma pasta lá que é 23 alunos depende e beleza agora o trabalho somente aqui dentro antes da gente sair programando essa

funcionalidades nosso projeto é legal a gente entender a estrutura dele né Quais são as pastas que ele tem já que ele é um Framework ele já vem com uma estrutura com uma série de regras e coisas configuradas certo E aí a gente se achando Aqui fica melhor depois a gente conseguir trabalhar com maior velocidade Então beleza no de models padrão de projetos baseados no JS né dependências a pasta Public é a pasta onde tem os ativos né os assets estáticos da aplicação então geralmente ícones as imagens da aplicação certo você vai jogar tudo aqui claro

que aquele Jogou tudo de qualquer jeito você pode criar subpassas dentro de Public e essa pasta Public ela é acessível a partir da raiz da aplicação então se eu quiser acessar esse pavê com ponto Ico aqui é só acessar né A minha aplicação barra fabricam aqui já está contida na raiz da aplicação já veio isso pré-configurado perfeito depois aqui em surf eu tenho aplicação em si já já eu falo dela vamos deixar quieto por enquanto tá então aqui é realmente as páginas da aplicação os componentes etc depois eu tenho arquivo de configuração do s20 que

é a parte padronização de código é verificação de erros tudo mais o Git Ignore né claro aquilo de configuração aí do Git para ignorar algumas pastas o arquivo de tipos do Next certo a gente não mexe nesse cara aqui porque o Next ele recompina esse cara sozinho então não é legal mexer nele que vai ser perdido o Next config que é um arquivo de configurações do Nexus GS específico do nexgs principalmente configurações ligadas aí ao ssr né a renderização e também configurações dos servidor do nexts que sobra aplicação depois a gente tem o pack de

Jason que é padrão é de projetos baseados no JS né com dependências scripts repare aqui nos escritos para a gente executar o projeto já vamos fazer isso o pack de loc Jason né que árvore de dependências um Leme e o teste config.jayson que é o arquivo de configuração do Type script Então vamos executar esse projeto aqui porque é uma aplicação já de exemplo que ele criou para gente tá como é que a gente faz isso você vai abrir o terminal na pasta específica do projeto e você vai rodar o comando npm deve ele vai rodar

o script ele vai subir um servidor web na sua máquina servidor do Next quando você acessala o carro de 3.000 no navegador ele vai exibir essa aplicação aqui de exemplo tá então dá para ver que eu tô usando aqui nets na versão 13 que a versão mais recente que eu gravo essa lição e aqui tem uma dica comece editando src/pages/index.tsx como é que a gente muda essa página aqui se a gente for lá em cerse peixes Olha só não é que eu tenho um indextsx mesmo então reparem que aqui ó eu tenho o tsx né

que a mistura de taip script com HTML certo que define o que vai aparecer naquela página lá certo então repara que no meio Eu tenho uma dívida centralizada quem já trabalhou com react já tá batendo o olho aqui está se sentindo em casa ela tá sentindo em casa aí eu vou tirar essas imagens aqui do meio e eu vou colocar um H1 com olá mundo aqui ó salvei no momento que eu salvei ele já recarrega Já faz um novo build e recarrega os arquivos no meu servidor tá aqui hellow Road já mudou a minha aplicação

instantaneamente então aqui dentro de peixes vão as páginas da nossa aplicação eu tenho uma página ainda que aquela padrão lá que você vê no navegador sempre que você tiver uma página ainda ela vai ser roteada automaticamente para o endereço barra certo além da index eu tenho uma pasta api que nós não vamos utilizar aqui que é para você criar peixe com next tal next também pode ser usado como back end não é o caso aqui para gente eu tenho uma ep_ep tsx que seria Aquela aquele arquivo principal do react né onde todos os outros são

injetados Será que ele contêiner principal da aplicação é esse apps x aqui eu tenho esse document tsx que ele Define um padrão Global aí para o documento HTML que vai ser utilizado na renderização das páginas certo e aqui em Styles eu tenho os arquivos CSS nos módulos CSS que vão ser usados aí para a estilização das páginas então o globals afeta todas as minhas páginas e o home ponto Model afeta sua mente né a index se você olharem aqui na index eu tô importando aqui em cima o home ponto mod o ponto CSS bem no

topo Então isso é o mínimo do mínimo do mínimo que você tem que saber é para começar a mexer aí com next reparem que eu tenho um componente funcional assim como eu teria no react então consigo utilizar né JS x ou tsx que já estava acostumada fazendo react eu consigo utilizar os hulks do react state effect etc certo bem como eu também consigo utilizar coisas exclusivas do Next não é não é ele tem as suas diferenças tá uma diferença que é muito boa muito bacana que eu acho que uma das principais vantagens de você trabalhar

com frame ao invés de uma Lib é a questão do roteamento então se eu criar uma nova página aqui vou criar por exemplo uma about ponto tsx ou melhor Uma Mente ponto tsx por exemplo tá uma página Então para mim tá tokens eu vou copiar essa index aqui para a gente ter como exemplo e eu vou apagar todo o conteúdo dentro de mim certo paguei todo o conteúdo aqui dentro de mim e eu vou colocar aqui mente page pode escrever o que você quiser aí tá tanto faz é só para você ver que como exemplo

beleza então criei aqui uma outra página que é 20 não vamos usar essa imagem aqui também não esses estilos aqui também não tirar eles aqui e é isso aí no react normal que eu teria que fazer para navegar de uma página para outra né eu teria que instalar o react alter Don configurar um arquivo de roteamento certo aqui não aqui se eu criei uma outra página né andando de Pages uma outra página automaticamente ela já é roteada a partir do nome do arquivo então eu tô aqui na index que é a rota barra se acessar

barra Mint essa aqui é a rota barra Mint que leva para mim de tsx então automaticamente ele já faz o roteamento para gente claro que se você quiser fazer rotas protegidas parâmetros subníveis entre as rotas daí você tem que configurar mas se você só quer levar uma página para outra né essas rotas padrões aqui são geradas é automaticamente para gente E aí conseguiu entender o que que é e para que que serve o Next se você conseguiu deixar o seu programa rodando eu vou pedir que você coloca aí nos comentários O que que você achou

dessa aula e deixa o seu like para me ajudar a divulgar esse vídeo para mais pessoas aqui no YouTube agora se você teve qualquer dificuldade deixa aí embaixo também que eu ajudo todo mundo que me manda comentários para encerrar e convido a se inscrever no canal se você ainda não for inscrito para não perder os próximos vídeos sai em vídeos como esse semanalmente por aqui então um abraço e até o próximo valeu