5 FUNDAMENTOS do NEXTJS 14 que você PRECISA entender

o Next 14 foi lançado recentemente tá E e aí Ele trouxe várias novidades também que eu já fiz inclusive vídeos aqui no canal e E aí na a ep router né a arquitetura nova que foi introduzida ali no next 13 no ano passado e ela trouxe várias novidades também eu acho que foi a maior versão ali A maior atualização do Next nos últimos tempos ali ela de fato ela trouxe muita coisa nova é E aí tem muita coisa que ainda se mantém tá do Next 13 pro next 14 e que além de manter são fundamentos

ali que são coisas que eu considero muito importantes você entender e você dominar para você conseguir desenvolver bem ali e utilizar bem o Framework tá E e aí nesse vídeo a gente vai falar sobre cinco coisas que são cruciais você entender por mais básicas que pareçam elas são básicas por um motivo tá elas são e pontos fundamentais dentro do Framework então é muito importante você entender todas elas para conseguir utilizar bem e Usufruir do poder que o Next traz pra gente beleza então vamos lá vamos pro vídeo Fala galera beleza Juno Alves aqui bom como

eu comentei né Eu tô com projeto rodando aqui já tá e v até vir aqui ó beleza e aí aqui a gente precisa entender algumas coisas tá primeira coisa para ir já direto ao ponto como que as rotas do Next elas funcionam é basicamente de uma forma bem simples tá o Next ele funciona com base nos arquivos que a gente tem aqui que a gente cria dentro da pasta app tá eh e isso acontecia desde de antigamente também né antes da da versão TR aí que introduzi a app router eh com a pasta pages tá

quando você cria um arquivo nesse caso aqui quando você cria um projeto eh você vai ver que ele cria algumas alguns arquivos aqui que são eh obrigatórios vamos dizer assim tá que são dois nesse caso aqui é o arquivo layout Tá eu já vou explicar para você o que que ele é o arquivo page o page é o que interessa pra gente aqui agora tá o o page aqui na raiz da pasta App ele é o index do nosso projeto tá então se eu vir aqui colocar aqui homeon quatro e aqui e for lá no

Browser ele vai atualizar ali então e aquele arquivo ali é o arquivo raiz aqui é o index certo então ele é o arquivo de entrada vamos dizer assim do nosso ah projeto e o arquivo layout ele básicamente né esse arquivo layout aqui na raiz ele é o root layout Ele é o único layout né esse arquivo que o nex chama de Special files Ele é o único que é obrigatório tá a você pode ter outros layouts daqui a pouco a gente vai fazer isso mas é o único que é obrigatório mesmo é isso aqui o

restante né você cria caso você necessite o que que esse arquivo aqui tem tem então vamos lá ele tem um tem uma tag aqui tem um HTML certo tem um body tem uma que é opcional aqui nesse caso não precisaria tá e tem um shelden Então o que acontece esse sheld aqui já tá até tipado né ele tipo react node ou seja qualquer componente react pode ser passado aqui como filho para esse layout e o que acontece aqui né E se eu tivesse hum todas as rotas aqui na verdade né Inclusive a pasta a rota

index elas são eh abraçadas vamos dizer assim por esse layout certo então qualquer coisa que eu colocar aqui nesse layout então se eu vem aqui por exemplo colocar aqui um BG 300 isso aqui aqui salvei então você vê aqui ó que ele já tá refletindo tá lógico né Eu poderia ali o correto seria você é ocupar aqui toda a a viewport aqui do do browser certo mas aqui é só um exemplo tá para você entender o poder que isso aqui tem então ele lembra disso ele fica por volta da aplicação tá para você que já

utiliza o Next há mais tempo lembra lá do arquivo underline app que ficava dentro da pasta peixes e existe algumas coisas que a gente utilizava lá que agora a gente vai utilizar aqui o layout para fazer tá bom partindo aqui seguindo adiante né como é que a gente cria então uma rota né uma página aqui dentro do Next 14 né isso vale pro next 13 também paraa app router em geral app router aqui a pastinha app tá então eu vou vir aqui dentro da pasta app e vou clicar com o botão direito New file vou

criar aqui por exemplo uma rota users tá E aí aqui dentro Eu preciso ter um arquivo na na raiz da minha pasta eu preciso ter um arquivo chamado page no singular dsx então V vir aqui Export default function user page o nome que tanto faz tá pod colocar qualquer coisa só para deixar mais semântico mesmo return colocar aqui um H2 users tá agora olha que interessante se eu vi aqui no nosso browser Barra users já tá aqui e perceba que o layout ele ele persistiu certo Por que que ele persistiu porque como eu falei aquele

arquivo layout ele fica por volta de toda a aplicação então todo arquivo e que que não tiver um layout vamos dizer assim um layout seu ali dentro porque a gente poderia vir aqui ó e criar aqui um arquivo layout aqui dentro tá então são layouts nested né nested layouts então eu vou vir aqui vou copiar só pra gente agilizar um pouco então vou vir aqui colar e aqui ó eu não quero esses [Música] dois não quero esses dois e aqui eu vou colocar aqui um 600 por exemplo tá então esse arquivo layout ele é referente

à ã as sub rotas né as rotas aqui dentro de user então se eu tivesse uma outra rota aqui por exemplo eu quero criar uma rota no Browser que vai ser assim ó users barra eh config Eh sei lá pode ser só isso como é que você faria você criaria a pasta users certo aí dentro de US você vai criar uma outra pasta que chama config e dentro da pasta config você vai criar um arquivo page tsx certo então vai ficar assim ó users users bar config bar page tsx aqui na na raiz certo aqui

na raiz aqui na pasta app e lá no Browser você vai conseguir acessar dessa forma certo bom Beleza a gente criou aqui o nosso aquio layout Olha que interessante agora então esse Cinza Mais Escuro aqui ele é o layout de dentro de users e esse cinza mais claro ele é o layout de dentro da raiz ele é o Rot layout certo interessante né ele tá com esse daqui porque ele tá com pading tá então ele vai somando os pads ali então por isso que ele tá ficando mais largo vamos dizer assim eh na na vertical

né Mas viu o poder que a gente tem aqui que a gente consegue ir encadeando essas coisas e aí um outro ponto interessante também é por exemplo agora a gente tem duas rotas né como é que eu faço da Rota do Index e PR Rota users e vicea conseguir voltar bom o Next ele provê pra gente várias features né uma delas é um componente link tá aqui link eu vou colocar por exemplo ir para home colocar aqui um HF e colocar barra tá já vou copiar isso daqui e já vou lá no page aqui também

ó e aqui vai ser barra users certo bom salvei Beleza já apareceu aqui então se eu clicar aqui no ir para home ele volta né para home obviamente se eu clicar aqui ir para aqui é users tá o hot rel não tá tão tão rápido assim mas beleza ah coloquei errado aqui a rota né que é um ponto interessante também tá a gente a gente vai dar uma olhadinha nessa página 404 aqui também daqui a pouco então beleza agora voltou a funcionar só que eu tinha colocado a rota errada e aí Olha que interessante Então

agora a gente já conseguiu criar as nossas rotas entendemos ali o arquivo layout o propósito dele a gente conseguiu fazer transição entre as rotas também tá E e aí um outro ponto que é interessante como eu comentei né um um um ponto aqui que eu quero que você fixe tá o arquivo layout na pasta no na na raiz aqui da APP ele é obrigatório aqui eu posso remover tá não tem problema nenhum se eu mover ele vai sumir daqui beleza ele se Manteve ali só apenas com o arquivo o layout né da raiz ali do

projeto certo agora se eu remover isso daqui aí você vai eh levar um erro né e um outro ponto interessante é como é que a gente cria agora né a gente aprendeu a criar nossas rotas Mas e se eu tivesse uma rota que fosse assim ó por exemplo aqui a gente tem por exemplo vamos supor que se fosse uma listagem de usuários E se eu quisesse uma página de detalhes do usuário como é que você faria bom você poderia fazer assim ó users barra aí você vai ter colocar aqui por exemplo vamos supor que eu

na rota eu quero que seja o ID do user certo supor que seja assim ó antes da gente seguir aqui ó vou fazer assim ó Isso aqui é como vai ser no Browser tá então [Música] ah browser Então vai ser assim ó users barra um ID aqui sei lá certo isso aqui seria a rota de isso aqui seria a rota de listagem isso aqui seria a rota de detalhes de um usuário certo aqui lista todos aqui lista os detalhes de um como é que a gente faria isso aqui então eu poderia vir aqui ó e

fazer assim ó ah users então criar uma pastinha users aí dentro da pastinha users vou criar uma pasta com cochet ID certo e aqui dentro page tsx já vou entender o porquê tá então você pode vir aqui ó dentro de users criar uma outra pasta aqui ó então então ah id e aqui dentro eu vou criar um page ptsx tá isso aqui chama rotas dinâmicas tá quando você cria com esse cochete aqui ó e aí aqui a gente pode fazer o seguinte Export default function ah user page Lembrando que o nome né pode ser qualquer

nome que você quiser então aí aqui eu vou colocar aqui user tá E vou colocar aqui por exemplo para exibir o ID que tá sendo e o ID do usuário aqui na rotas para você ver que a gente tá de fato e pegando esse ID né então eu posso vir aqui por exemplo colocar um p colocar aqui id e colocar aqui um ID qualquer que a gente ainda não tem como é que a gente vai receber esse ID tá aqui ó a gente pode fazer o seguinte tá posso vir aqui ó parms e vou tipar

isso daqui ó colocar aqui parms ele é um objeto que dentro dele tem um ID que é uma string Por que ID porque ID é exatamente o nome que da passa tá se aqui fosse ID aqui deveria ser ID aqui fosse Slug aqui também deveria ser Slug certo então eu vou colocar isso feito isso aqui na verdade é parms pid certo feito isso olha que interessante salvei aqui salve ali cer e aqui dentro de users vamos supor que a gente tem um outro link aqui ó para ir por exemplo para users barra 1 2 3

e para detalhes do usuário certo Olha que interessante Então a gente tá dentro da pasta users da Rota users né então agora tem um outro link aqui tá então a detalhes do usuário se você clicar ele vai redirecionar você pra rota users bar1 23 e aqui já aparece o ID que é o mesmo ID daqui de cima então se eu mudar o ID aqui ó ele muda aqui embaixo também interessante né então a gente tem esse poder muito grande Tá eh rotas dinâmicas dentro do ah do NE aqui né Ele é uma feature né basicamente

é uma feature que o react ele permite é que você crie páginas eh com pastes que são dinâmicas né então você pode reparar que essa parte aqui ela não é fixa ela não é estática ela é totalmente dinâmica Então dependendo do que tiver aqui na rota a gente faz alguma coisa aqui então isso aqui é muito útil para você conseguir pegar esse id e fazer um get na na sua num end Point de detalhes de Us á e etc tá um outro ponto interessante agora pra gente finalizar que é bem interessante eh um ponto que

é bem interessante que é o seguinte né a gente já tinha visto aqui ó se eu por exemplo acessar uma rota que ela não existe então a gente tem esse 404 aqui que é o default do Next né mas convenhamos que é uma página bem bem feia né vamos dizer assim então mas a gente pode customizá-la tá eh e é algo que poucas poucas pessoas sabem tá então você pode vir aqui ó dentro da pasta app você vai criar aqui ó um arquivo chamado no not found tsx certo e aqui eu vou fazer o seguinte

eu vou dar um Export Ah não é const Export default ah function not found lembrando de novo que o nome tanto faz tá E aqui eu vou colocar só um H2 not found certo aqui você pode né estilizar a sua página colocar uma animação colocar uma ilustração aqui bem da hora tá aqui é só para ilustrar mesmo então aqui agora você já tem a sua rota de página não encontrada né de 404 aqui customizada pô tem muita eh ideia massa no Dri behen acho que bens também deve ter mas no Dri cara tem muita eh

imagem assim para você se inspirar para você criar aí suas páginas 404 tá recomendo bastante até uma dica bônus Aí caso você não conheça o drible tá drible escreve assim dry bom são três BS tá então É bem interessante eh bom era isso que eu queria passar para você nesse vídeo tá lembrando que nessa black friday a gente vai ter Black Friday no nosso curso de Next tá e eu vou atualizar também ele pra versão 14 atualmente ele foi feito na versão 13 mas eu vou atualizar pra versão 14 até porque pelo propósito do curso

não teve muitas mudanças assim e E aí vai ter uma um super desconto aí na black friday então se você que tá pensando em adquirir e essa vai ser sua grande chance então não perca essa oportunidade que provavelmente vai ser o último desconto ali do ano tá E vai ser um super desconto então fica ligado que vai ser bem da hora tá E e aí os links também para você acompanhar onde eu vou divulgar isso daí tá aí na descrição né acompanha aqui o canal se inscreve no canal caso você ainda não é inscrito aí

deixa seu like deixa seu comentário isso ajuda demais cara aí eu continuar trazendo conteúdo aqui se você gosta desse conteúdo aqui se o conteúdo tá te ajudando a forma que você tem é que você pode contribuir com isso é deixando o seu like aí e se inscrevendo no canal beleza eh Então é isso galera Valeu falou grande abraço e até a [Música] próxima