Dominando Next JS completo do zero 🔥

hoje eu separei um guia completo na prática onde você vai aprender o que que é o nextjs como aplicar na prática o que que ele traz de recurso a mais dentro de um projeto react Então seja muito bem-vindo a mais um vídeo aqui no canal se você é novo por aqui ou se você não conhece o nosso canal se esse vídeo te agregar de alguma coisa você sabe ó se inscreve aqui embaixo que ajuda a gente trazer mais conteúdo para vocês e para você que já é inscrito eu nem vou perder meu tempo que eu

sei que você já deixou o seu gostei aqui embaixo Então bora lá primeira coisa que a gente vai fazer então eu separei aqui de uma forma mais didática que é possível pra gente aprender na prática você vindo do react ou você começando a estudar o Next O que que é o Next O que que ele tem na prática e como que a gente pode então evoluir nossas aplicações com react usando o Next então eu separei em alguns Capítulos que a gente vai falar e vai ver na prática como desde Criar o seu primeiro projeto Como

trabalhar com navegação de páginas metad server component client component rotas dinâmicas server actions aqui dentro revalidação cach é cach dentro da de uma requisição no data fetting aqui e também sobre mws tá e a gente vai falar até um pouquinho também sobre api ou eh api handlers né maravilha então bora lá pra gente começar primeira coisa como vocês sabem né o react ele é apenas uma biblioteca então ele é uma biblioteca para desenvolvimento de interfaces de usuário então ele nada mais é do que pra gente construir interfaces de usuário com componentização modularização de forma reativa

já o Next o Next ele é o quê ele é ele é um Framework tá e eles falam Framework for the web né porque ele é basicamente um Framework full stack hoje em dia então ele é um Framework que dentro dele utiliza o react ele usa a biblioteca react aí então usando todo o poder do react só que como ele é um Framework ele vai trazer alguns recursos a mais então algumas coisas e algumas ferramentas como roteamento de página já que no react puro quando a gente quer trabalhar com navegação página contato barra login barra

cadastro a gente precisa geralmente ter uma biblioteca que faça isso por exemplo o react hter dom que é muito comum já no next ele traz esse roteamento dentro incluso nessa ferramenta outra coisa como a gente viu aqui no nosso guia que a gente vai ver na prática aqui é por exemplo a parte de revalidação de dados server components metadata de uma forma otimizada ou seja você quer construir um site um sistema que seja indexado no Google para quando alguém pesquisar nos buscadores seja encontrado de forma fácil esse seu site ou bem rankeado lá em cima

ou quando você tem páginas dinâmicas por exemplo um ecommerce a gente tem e barra loja barra produto 1 Barra produto não sei o qu então esses produtos ou essas páginas vão sendo indexadas no Google também para quando alguém pesquisar alguma coisa Seja encontrado então a gente consegue fazer isso muito fácil com o nextjs deixa eu abrir aqui o guia de novo outras coisas como lidar com middleware APP api handler que é basicamente a gente chama de api na verdade é H handlers né então você conseguir ter backend integrado dentro do mesmo projeto com o Next

Então isso é uma coisa que a gente pode criar aqui vamos lá então pra gente começar pra gente fazer o nosso primeiro capítulo eu vou separar aqui embaixo É nos points aqui dentro da do nosso vídeo primeiro passo paraa criação de projeto como é que a gente cria um projeto com next Então dentro da documentação nextjs.org a gente copia aqui o comandinho eu vou criar aqui dentro da pasta uma dendo Não crie nomes com acentos nome com caracter especial nem nome com espaço Então vou colocar aqui o comando vou dar aqui um espaço aí vou

dar um nome que eu quero então por exemplo Ah vou chamar aqui de aula a sua aula né vou colocar esse nome aqui pro meu projeto vai se chamar aula e ele vai fazer algumas perguntinhas aqui tá essas perguntas com base nas versões elas podem mudar mas é entendendo o que que é cada coisa que é importante Então olha ele fala Olha você já quer iniciar o seu projeto com typescript no nosso caso eu quero Então vou dar aqui um Yes quer com s link nesse caso eu não vou colocar no pra gente não não

perder muito tempo com configuração de S lint Então vou colocar no vou dar um Yes Você já quer o t ind CSS instalado dentro do projeto eu quero para facilitar aqui se você colocar no ele vai vir com CSS padrão tá E você já quer colocar os arquivos néos seus componentes o seu search coding dentro da pasta src que é onde a gente vai modificar os arquivos sim eu quero que já venha dentro da pasta src é você já quer vir com app houter app houter é a forma de roteamento de página integrada né Ou

seja a gente já tem o sistema de file System routing dentro do Next que a gente vai conhecer o que quer na prática Então vou dar aqui um Yes e você quer criar já com turbo pack não quero Então vou dar um no e vou dar um Yes aqui Import Alias eu vou dar aqui um Yes apenas se quiser colocar novo aqui também não tem problema vou dar um entra aqui apenas ele vai inicializar Então esse nosso projeto enquanto ele vai criando ó pega esse vídeo aqui compartilha pro seu amigo aí ou pra galera que

quer aprender next Beleza então vamos aguardar Maravilha foi criado aqui ó se a gente olhar dentro aqui do nosso CD aula então acessi a pasta do nosso projeto vou abrir ali no meu vs code Então abre aí a pasta do projeto que você criou dentro do seu vest code vou abrir aqui vou dar um Yes e vou colocar aqui do ladinho pra gente poder ver isso aqui e o que que ele criou pra gente tá outra coisa agora que a gente criou o projeto Eu também já vou rodar ele em desenvolvimento então para rodar npm

Run espaço Dev tá então com isso ele vai rodar o nosso projeto em desenvolvimento e ele vai subir aqui ó falando que no meu caso pode até mudar para você então no meu caso tá rodando na porta 3.000 Então vou até clicar aqui ou copia né e abre aí local ruso 3000 vou abrir aqui do lado vou puxar aqui um pouquinho pro lado vamos esperar ele compilar e carregar Então essa é a cara Inicial hoje em dia eles ficam mudando toda hora a cara Inicial isso não importa tá Então essa é a cara Inicial quando

a gente roda o projeto em next atualmente é dessa forma aqui mas antes pra gente começar aqui a primeira coisa que a gente precisa entender é entender a estrutura de pastos do nex JS Beleza então bora lá vamos entender a estrutura de passas aqui quando a gente cria um projeto ele vai vir com alguns arquivos criados tá Primeiro começando de baixo aqui como a gente tá usando o typescript ele vem com a configuração do TS config Então se a gente fosse acrescentar alguma configuração modificar é aqui dentro do typescript para esse nosso projeto beleza outra

coisa que ele vem já com o twind como a gente colocou para para vir com a configuração do te end então ele já vem aqui outra coisa ele já vem como ele é um projeto que utiliza o node JS Então a gente tem aqui o package Jason dentro do nosso projeto então aqui dentro a gente vai ter as Death dependen são as dependências de desenvolvimento do projeto as dependências que o projeto precisa como o react Atualmente como eu tô gravando para vocês ele tá usando a última versão Hoje em dia a 15 né 15.0.3 e

ele usa a versão 19 do react que ainda nem foi lançada mas ele já tá é usando aqui tá Então essas são as dependências que precisa para um projeto n funcionar perfeito e ele já vem com alguns scripts aqui pré criados né o script de Dev que a gente acabou de rodar para rodar em desenvolvimento o script de build pra gente gerar um build da aplicação já já a gente vai fazer isso também o start que é para você gerar um build e quer testar como é que o o projeto vai se comportar como se

tivesse rodando em produção então comando start aqui beleza depois disso ele vai vir com mais alguns arquivos como nest config que a gente pode passar configurações options extras para o nosso o nosso projeto nex Tá além disso ele vem aqui com algumas pastinhas como o Public que dentro ele vem com algumas imagens padrão como você pode ver vem com a imagem aqui ó da logo do nex ele vem com algumas Logos aqui então ele vem com alguns arquivos vem em svg tá então vem alguns arquivos estáticos quando você quer ter um arquivo estático nessa aplicação

por exemplo Ah eu tenho a logo do meu projeto você pode colocar dentro da pasta Public que essa aqui vai ser uma imagem estática que vai ficar ali sempre no seu projeto tá então você pode colocar dentro dessa pasta Public aqui dentro da pasta src vem o nosso search coding ou seja dentro dess RC É de fato onde a gente vai manipular e escrever o nosso projeto aqui com next então aqui dentro ele vem vou Minimizar aqui ó com uma pastinha chamada app o app nada mais é com o nosso file System routing ou seja

tudo que a gente colocar basicamente aqui dentro pode se tornar uma rota ou seja uma navegação da nossa aplicação um roteamento e uma navegação de página então com o react a gente tem o nosso react hter Dom Por exemplo quando você quer criar navegação de página Você trabalha com o react router Dom já quando a a gente tem Connect ele já vem com esse cara chamado file system routing que é o nosso app router aqui ó se a gente procurar dentro da documentação em routing a gente tem aqui a página de como definir as rotas

então ele dá até um exemplo que tudo que a gente coloca dentro do nosso app pode se tornar aqui ó uma uma rota dentro da nossa aplicação que é algo sensacional Então não preciso ficar instalando biblioteca externa então por exemplo dentro do pasta App ele vem com algumas Fontes pré-advento navegador e também ele vem com o globals.css que é a configuração aqui do dos do twind eu vou até tirar isso aqui ó vou deixar só o nosso Body vou tirar ess color aqui deixar só isso aqui dentro do body ó Perdeu até estilização salvei o

código dentro aqui ele vem com um arquivo chamado page.ts que é o componente react dessa página O que que a gente vai fazer eu vou dar um cont control a e vou deletar tudo isso aqui pra gente começar a criar a nossa página home Inicial então Export Export default function e vou chamar aqui de home return e eu vou colocar aqui por exemplo uma div e um H1 página home aqui ó Fechou então a gente criou aqui e aqui sim eu preciso que seja Export default que o Next pede pra gente não é eu que

tô querendo é o Next que pede pra gente fazer isso então se a gente salvar isso aqui e a gente olhar ó dentro do app a gente tem a nossa pastinha e dentro do app eu já tenho direto um arquivo chamado do page.ts então automaticamente esse cara aqui é a nossa página inicial do site ou seja a nossa página home então se eu acessar o meu meu site ó localhost 23000 você pode ver que ele vai cair no nosso componente que a gente chamou de página home Então esse aqui é o caminho inicial a nossa

componente inicial da nossa aplicação beleza E além disso a gente tem um arquivo chamado layout.txt ptsx é o arquivo basicamente de configuração do layout da nossa aplicação então aqui dentro ó eu eu tenho algum metadata vou tirar esse metadata vou tirar essas nossas Fontes aqui ó vou tirar fonte aqui o metadata Vou tirar isso daqui Beleza vou tirar essa nossa classe aqui da fonte aqui ó Beleza então só vou deixar aqui oal aqui só beleza vou salvar isso aqui salvei Vou atualizar aqui não quero configuração de fonte nenhuma então aqui dentro é a configuração do

layout da nossa aplicação aqui onde a gente tem o nosso carinha chamado aqui que é o Children o Children nada mais é do que a página aonde que é exibida então basicamente aonde a gente vê esse Children aqui dentro do nosso layout Global da nossa aplicação ó dentro do app a gente tem o layout então ele é o layout Global Então dentro do childreen aqui é basicamente como se tivesse renderizando a página por exemplo se a gente tá na página home é como se a gente tivesse renderizando esse componente aqui exatamente nesse local do tild

tanto é que se eu vim aqui em cima do tiam por exemplo ó e colocar um H1 teste teste ó e eu salvar o meu código e eu atualizar na minha página home aqui ó você pode ver página home em cima dela Olha lá o teste teste e como ele tá no nosso layout qualquer Página em cima vai ter o teste teste se aqui embaixo aparece a minha página Então se em cima eu coloquei alguma coisa qualquer página que eu acessar dentro do meu projeto vai ter aqui esse teste teste Então isso que é muito

bacana E outra coisa que é muito legal como ele já traz esse roteamento baseado aqui no app eu posso criar mais páginas dentro da minha aplicação de uma forma simples por exemplo dentro do nosso app eu posso criar aqui mais uma pasta chamada contatos beleza dentro de contatos New file e para falar que isso aqui é uma página Eu crio o arquivo chamado p tsx Então vamos dentro criar o Export default function e contatos abro aqui return Vou colocar aqui uma div H1 página contatos e eu vou salvar então agora como a gente criou aqui

ó presta atenção a gente tem aqui dentro o nosso app é onde bate a inicial dentro a gente tem o nosso arquivo page que é a nossa página de home e dentro a gente tem agora um arquivozilla então basicamente como a gente chamou de contatos a pasta e dentro tem um page isso aqui se torna uma rota então se eu vi no meu site aqui ó percebe que a gente criou dentro do app então se eu vir aqui barra contatos e eu tentar acessar Olha lá que legal página contatos Olha que sensacional né E se

eu acessar a página home a gente já tem a página home então tudo que eu for criando aqui dentro pode se tornar uma rota por exemplo vou criar dentro do app mais uma pastinha chamada dashboard né de painel dashboard dentro vou criar mais um aqui ó page.ts dentro do dashboard vou até copiar aqui o arquivo só para não perder tempo né E vou colocar aqui chamar de dashboard página painel dashboard Vou salvar isso aqui agora Então olha só agora a gente tem o contatos e temos o dashboard aqui dentro que tem o page Então como

a gente criou esse dashboard Esse nome que eu dei é uma rota agora então se eu acessar a barra contatos agora existe se eu acessar a barra dashboard também existe olha só que legal né e uma coisa que você começa a perceber é que a gente tem o nosso layout Global em todas as páginas então você pode ver que a gente tem o nosso layout Global aqui ó que tá fora em todas as nossas páginas então o tiring aqui onde é renderizado a página e se a gente colocar alguma coisa em cima ou embaixo é

renderizado em todas as páginas Porque pensa que o layout tá em volta da nossa aplicação e dentro tem a página sendo renderizada então se eu colocar aqui por exemplo reader da página e embaixo aparece aqui a página ó e eu salvar tô no dashboard Olha lá reader da página se eu acessar a página home e eu de um enter ó Olha lá página home e reader da página se eu acessar aqui o Barra contatos mesma coisa olha o reader aqui em cima e o página contatos aqui tá então isso é muito bacana outra coisa que

a gente pode fazer é a gente pode separar por exemplo um componente Ah eu quero ter um componente na minha aplicação que de fato tenha um header que ele esteja em todas as páginas então por exemplo eu posso vir aqui vou vir aqui ó fora do meu app que src vou criar aqui um New Folder dentro dela chamado components tá então dentro do components eu vou criar uma nova pastinha chamado reader e dentro dela New file index.tsx porque aqui é apenas um componente não é uma página components heer e a index então Export aqui eu

não preciso dar default porque é só um componente então Export function e eu vou chamar aqui por exemplo de heer return e eu vou colocar aqui um heer uma tezinha de heer colocar aqui um H1 heer do projeto e eu vou salvar então criamos o nosso componente se eu salvar isso aqui agora e eu e a gente vim dentro do nosso app layout e agora ó vou tirar esse H1 daqui vou importar O componente para exibir eu posso então eu posso vir aqui ó Import from ponto pon barra acessar o components Barra reader não preciso

dar o Barra index posso deixar sem a barra no final que ele já pega o arquivo index dess dessa pasta e eu vou puxar aqui ó header eu posso colocar aqui em cima olha que sensacional então renderizo o componente embaixo eu renderizo as páginas então se eu salvar isso aqui agora toda a página ó reader do projeto Se eu for para home reader do projeto legal né Eu separei um reader Zinho aqui bem simples só pra gente poder não perder tempo aqui salvei vou colocar um header Zinho aqui ó vou colar colocando com Twi CSS

depois eu posso deixar esse esse repositório para vocês não tem problema tá mas é só pra gente ver ó que agora eu tenho um reader Zinho aqui em toda a minha página ó página home barra se eu for aqui barra contatos Olha lá se eu for barra dashboard Olha lá que legal e o nosso e o nosso reader fica em todas as páginas tá e como a a gente tem navegação aqui de página já incluso dentro aqui do nosso next a gente também pode fazer Linking dentro da nossa aplicação de forma fácil então se eu

quiser por exemplo criar links de navegação aqui dentro da nossa aplicação como é que eu faço a gente tem por exemplo o home e o e o posts aqui ó que a gente vai ver né então eu quero que isso aqui seja links para navegar para essas páginas então por exemplo aqui na nossa na nossa home eu quero que tenha um link aqui então para isso a gente pode importar acho que o seu digital ele já completa para mim deixa eu ver aqui ó link com l maiúsculo vou dar um Tab aqui ó ah já

importou importa aqui do Next bar link E aí aqui dentro posso colocar o que eu quero por exemplo página é descrição vai ser home o href para qual link da minha página eu quero levar por exemplo barra Vamos colocar aqui barra só barra né porque é a home vou copiar esse link vou colocar aqui nos posts por exemplo ã maravilha eu quero que aqui seja por exemplo posts e leve para Barra posts por exemplo e eu vou colocar mais uma vou duplicar aqui mais uma vez o li deixa eu separar aqui para ficar melhor para

você vocês no vídeo E aí eu quero que seja por exemplo dashboard que a gente já criou né então barra dashboard Beleza se eu salvar isso aqui agora vamos lá salvei e eu voltar aqui na minha aplicação Ó você percebe que a gente já tem ele aqui se eu clicar no Home ó vem pra página home se eu clicar aqui no posts ó não existe ainda e você percebe que o nosso header continua sendo exibido embaixo onde era para ser a página ele diz que não existe Beleza a gente já vai entender isso aqui se

eu clicar no dashboard existe o dashboard então ele já navega sensa então a gente já consegue ter navegação de uma forma muito simples dentro do Next aqui usando esse file System routing que eles chamam aqui tá então se eu voltar aqui no nosso guia a gente entendendo um pouquinho mais sobre roteamento e navegação a gente vai evoluir ainda mais aqui dentro mas outra coisa que é importante a gente entender aqui dentro também é que a gente pode ter de uma forma muito simples por exemplo páginas de not found que a gente acabou de ver então

eu posso ter uma página personalizada para uma página que não existe na aplicação como por exemplo Ó Barra posts a gente ainda não criou ou por exemplo barra qualquer coisa que o usuário digitar não existe né então eu quero criar uma página de not found para isso eu posso criar ele Global por exemplo dentro do nosso roteamento que é o nosso pasta app New file e eu vou chamar ele de not trof P tsx tem que ser com esse nome tá Não é eu que tô inventando é o a a documentação do Next que pede

pra gente então se a gente olhar aqui por exemplo not found ó lá eles pedem para que seja esse nome de arquivo Beleza então aqui dentro desse cara a gente pode criar criar o nosso Export default function not found return vou criar aqui um um return Zinho aqui vou colocar aqui uma div Vou colocar aqui um H1 por exemplo página 404 não encontrada beleza aí eu vou colocar aqui por exemplo uma parágrafo aqui essa página que tentou acessar não existe beleza perfeito e aí também a gente pode colocar por exemplo um link né V dar

um Tab aqui ó já importou o nosso next bar link eu quero colocar aqui por exemplo voltar para home E aí quero que leve o usuário HF para a página home aqui vou vir aqui no nosso div vou dar um Class name Flex items Center e um jfy Trace o Center também Maravilha e vou colocar aqui no H1 também um Class name text Center e um fonte traço bold aqui vou salvar isso aqui agora vou falar que a gente vai ter um Flex colum E também como eu não vou centralizar porque eu não tenho a

altura da página se eu tivesse aqui uma mínima mínima altura aqui por exemplo de 100 de screen aqui que seria sem VH ele ia centralizar mas eu não peguei a medida do nosso heer então vou deixar sem essa mínima altura e aqui no nosso H1 eu só vou distanciar um pouquinho vou colocar aqui um um margem top um MT colocar aqui uns nove só para dar um distanciamento aqui ó e também no nosso H1 eu vou colocar aqui um text traço 7 6 XL aqui ó só para ficar maior tá só para ficar grandão para

vocês então não não tô ligando pra estilização por enquanto porque o foco é o Next aqui tá Então dessa forma quando a gente cria esse arquivo esse arquivo ele é um componente que ele ele é renderizado e mostrado na nossa aplicação quando a gente acessa uma página not found Ou seja que não existe Então não preciso de configurações extra para criar Isso então isso é muito legal então se eu salvar aqui ó quando eu tento acessar uma página que não existe ó já renderiza posso Navegar para Minhas páginas aqui ó home dashboard se eu for

pro posts ó posts ainda não existe ó não encontrada E se eu criar o posts vamos lá então por exemplo se a gente vier aqui dentro de app New Folder vou chamar de posts ó dentro de posts New file page.ts estão falando que isso é uma página E aí Export default function posts page return e aqui vai ser o Nossa div H1 todos os posts por exemplo vou colocar aqui vou salvar se a gente salvar agora ó existe a barra posts então Ó Barra posts agora existe Olha que legal aí ele renderiza aqui sem nenhum

problema Olha que sensacional né então muito legal isso já entendendo que a gente a gente pode também ter páginas de notf então agora dentro do Next Outro ponto importante é a gente falar sobre met datas dentro do projeto Connect Então vou até dar aqui um cheque já pra gente falar sobre isso dentro do nossos projetos e para que que isso vai servir né então a gente pode usar dentro de um HTML puro met datas que são metadados que a gente tem várias e várias tags para poder melhorar a indexação do nosso site no Google nos

buscadores tem um ranqueamento nos buscadores E além disso a gente consegue criar isso de forma forma dinâmica única dentro de um layout ou cada página tem um metadata diferente e manipular isso usando aqui um componente de forma simples Então olha que legal se a gente procurar aqui por exemplo dentro da documentação só para vocês entenderem que a gente vai aplicar isso na prática que é importante para vocês olharem também então aqui dentro se você procurar por seo metadata n seo aqui ó a acessar o metadata Api e a gente olhar aqui por exemplo que você

pode gerar static metadata ou seja met datas dentro de uma página que são estáticos né que são fixos o a título a descrição alguma coisa que você quer passar e você pode gerar metadata de forma dinâmica por exemplo você tem o exemplo lá da nossa e-commerce você tem uma url que é dinâmica e pode gerar met datas com base naquela URL fazer uma requisição http pegar o nome do produto a imagem a descrição e gerar isso de forma dinâmica para cada ID Então isso é muito legal tá então bora entender como é que funciona isso

aqui na prática os met datas dentro do do Next então para isso é muito massa a gente pode vir por exemplo vamos vir dentro da nossa página aqui de home ó que é a nossa page ó dentro do app page tsx e aqui dentro a gente pode criar aqui em cima tá um objeto então ô meu Deus meu teclado posso criar aqui um objeto Export con metadata tudo minúsculo tá E aí aqui dentro para ter uma um uma tipagem eu posso colocar aqui dois pontos metadata vou dar um Tab ó para importar do Next E

aí eu posso criar os nossos metadatos de forma de dinâmica por exemplo nosso title Vou colocar aqui a página home E aí vai ser aula nextjs do zero por exemplo né E aí eu posso colocar também uma description que vai ser por exemplo aprendendo nextjs do zero com sujeito programador Beleza vai ser isso aqui tá então se eu salvar isso aqui agora percebe que a gente criou em cima do nosso componente tá Por enquanto na página home então se eu salvar e eu voltar no projeto e eu vir aqui dentro da nossa página de home

Eu vou acessar você percebe aqui em cima que ele já vai ter um título Olha que olha que legal então se eu abrir um inspecionar que é a melhor forma pra gente poder visualizar isso aqui Opa deixa eu fechar isso aqui vi aqui dentro dos elementos né na parte aqui do Head se a gente abrir o head deixa eu fechar isso aqui também a gente vai ver que ele tem alguns metas aqui por exemplo agora ele inclui o metadata né chamado title que basicamente é o título dessa página que fica ali em cima isso ajuda

a indexar no Google também aí ele tem a meta data agora description que ele colocou então sensacional com o conteúdo que a gente passou se a gente abrir por exemplo a página dashboard barra dashboard e eu abrir o inspecionar dela vim aqui no elements abrir aqui o head você percebe que não tem por quê Porque a gente colocou por enquanto apenas dentro da página chamada aqui do Home então aqui dentro você tem os metadatasources compartilha no no ex lá no Twitter ou no seu WhatsApp e ele cria aquele link cria uma pré-visualização com título uma

descrição e uma imagem de pré-visualização Esse é o open graph Esse cara é responsável então para isso a gente pode colocar também personalizado por exemplo olha no title aqui aprendendo nextjs com sujeito no YouTube sei lá colocar um título e eu posso vou pegar a mesma descrição posso colocar uma descrição também então quando você compartilhar isso esse é o título que vai aparecer naquela pré-visualização e essa descrição e eu posso também mais além que isso vamos mais a gente pode images e dentro do imag você pode colocar um Array e aqui dentro você pode colocar

a URL de imagens então por exemplo eu tenho uma url aqui lá do nosso site que eu aa acho que ainda existe do TIP Jobs ó deixa eu ver se existe não sei se existe Ah não existe mais vamos dar um ponto png ah existe é ponto png então se eu acessar Por exemplo essa URL aqui ó e eu colocar ela aqui dentro do nosso pph Toda vez que você compartilhar esse site Essa vai ser a imagem de pré-visualização tá então isso muito legal vou tirar isso aqui e eu vou tirar essa imagem aqui porque

a gente não tem imagem mas só para mostrar para vocês e além disso a gente pode passar vírgula e outra propriedade como robots aqui né eu posso passar aqui ele index como true posso passar aqui também o follow como true se você quer que o robô né faça o follow aqui e pode colocar um no cash também eu não quero que tenha Cash Então vou colocar dizendo que a gente não tem Vou colocar aqui true eu posso passar também dentro do próprio Google bot falar olha se você quer quer um index se você quer um

follow Você pode passar todas essas propriedades então se eu salvar isso aqui agora a gente colocou o open graph e essa parte dos robots se eu atualizar por exemplo a nossa página home que é aqui que a gente tá mexendo atualizar a página home abre o inspecionar vem no elemento aqui ó Head e a gente olha para ver se foi inserido né então se a gente olhar met datata description tá aqui ó os robots tá aqui também olha aqui o Google bot já tá aqui o que qual que é os parâmetros que a gente colocou

eh og title que é o open graph tá aqui og description a gente tirou a imagem né senão estaria aqui og 2 p Image é o do Twitter que ele já gera também quando você compartilhar no Twitter do openg graph que é a pré-visualização né então a gente já consegue fazer toda essa essa parada dinâmica aqui então como a gente colocou na página home se a gente acessar outras páginas ó não tem ainda Mateus eu tenho que colocar em todas as páginas você pode colocar em todas como você pode colocar de forma global para caso

a página não tenha ele utiliza aquele lá então por exemplo vou copiar isso aqui e eu posso colocar dentro ó nosso app layout ptsx lembra que isso aqui é o layout Global tem o nosso reader então em todas as páginas eu quero colocar um um meta tag por exemplo vamos dar aqui um control espaço vou colar Então eu quero que o título seja por exemplo aula nextjs do zero colocar isso aqui como título na description vou deixar mesmo o resto eu vou deixar a mesmo então se eu salvar isso aqui agora caso a página não

tenha um metatag ele vai usar essa aqui e caso tenha ele vai usar que ela tem então se eu salvar e eu na minha p página home ó vou vir na página home aqui de novo você vai ver que ele vai usar o que a gente colocou na página home que é home e é isso aqui ó se eu for na dashbord ó a aula next aí ele usa o que a gente colocou no layout Então olha que forma fácil né da gente fazer toda essa parte de met tags dentro da nossa aplicação Então já

dei um cheque aqui e agora o próximo capítulo que a gente vai falar aqui é sobre server components client components o que que são esses caras e como que a gente pode é entender esses caras aqui na prática Então bora lá vou Minimizar isso aqui vou fechar isso aqui pra gente começar vamos vir dentro do nosso posts pages aqui tá então aqui eu tenho componente e por padrão o que a gente precisa entender dentro do Next que a gente vai ter componentes que são criados quando a gente cria um componente igual a gente criou aqui

que eles são server components tá então toda vez que a gente cria um componente assim ó padrão ele é um componente que ele é renderizado ele é gerado pelo lado server Side então a gente vê o que que acontece nisso aqui a gente vê menos JavaScript sendo eh gerado izado pelo lado do cliente ou seja se a gente olhar aqui por exemplo é que aqui a gente não tem nada né só um H1 aqui mas por exemplo e a gente olhar aqui dentro do Network eu vou dar um presta atenção deixa eu diminuir um pouquinho

aqui ó na parte aqui ó onde fala quanto de mega que ele tá carregando aqui então se eu pegar aqui e eu atualizar o dashboard você vai ver que deu 7.0 M Beleza agora se eu tivesse um componente client que é por exemplo se você cria um projeto Com react Puro eles são componentes client ou seja são componentes que T reatividade são componentes que podem ter clique de Botão use state use effect hooks Então são componentes que são renderizados pelo lado do client todo JavaScript então se você tem muitos imports aqui por exemplo de bibliotecas

que você tem aqui dentro e são componentes client todo o JavaScript que vai ficar responsável por carregar vai ser no lado client Então você vai ver que isso aqui vai ser muito maior tá claro que aqui a gente tá 7 Meg porque não tem nada no componente mas se fosse um componente Client que tem vários imports e várias coisas para ser renderizado no lado do client Isso aqui vai ficar bem mais pesado então a gente traz muito mais serviço pro lado do client que não é tão interessante Então com a chegada do dentro do Next

do server component e do client component uma das coisas que ele ganha é essa performance tirando a responsabilidade de você renderizar essas coisas pelo lado do client então a gente pode trazer muita coisa já pré criada renderizada ali gerada pelo lado do server Side que é do Servidor Então o que a gente precisa entender aqui é que a gente tem dois tipos que são server components e os client components por padrão quando você cria um componente tá você vai sempre ter um componente sendo renderizado do lado do servidor tá se a gente colocar aqui o

que que a gente tem que a gente ganha com o server component como ele é renderizado do lado do servidor a gente pode fazer o quê chamadas requisições http chamadas num banco de dados se a gente quer o que a gente quiser a gente pode fazer dentro do componente então por exemplo a gente tá aqui na página de posts né então vamos supor que você quer buscar da api alguns posts que você você tem que alistar os seus posts aqui a gente pode fazer sem necessidade de usar hooks por exemplo eu não preciso disso porque

a gente tá no lado server aqui lembra que ele passa pelo server quando chega aqui no cliente ele já passou pelo server então a gente pode fazer essa requisição direta dentro do componente já quando a gente tá dentro de um react puro a gente precisa um react query ou um use effect a gente precisa de algo né client para ter essa reatividade de buscar de uma API lá então como que eu faço para criar um componente client por exemplo se eu quiser criar um componente que é uma página que seja um componente client é tranquilo

a única coisa que vai mudar é que a gente vai colocar a diretiva aqui no topo do componente chamada use client a partir da hora que numa página ou em um componente você colocar use client esse componente aqui ele é gerado lado cliente tá se eu salvar isso aqui agora esse componentes a gente atualizando por enquanto a gente não vai ver nenhum efeito Mas agora vamos entender os dois na práticas o que que cada um tem de diferença Então olha só eu vou vir aqui tá vou tirar esse US client e vamos entender como que

a gente consegue Então se a gente fosse fazer uma requisição http usando server component eu posso transformar o nosso a Sync function componente usando a Sync e eu posso diretamente dentro do corpo do componente fazer uma requisição http Então posso con é vamos chamar aqui de response igual await await patch eu vou pegar aqui uma API eu separei uma map pra gente poder trabalhar que é essa dumy Jason aqui ó vou colocar ela aqui tá então vou fazer uma requisição se a gente acessar essa api ela vai trazer uma listagem de posts se a gente

olhar aqui ó listagem de posts que cada objeto tem essas propriedades aqui eu V até criar uma tipinha aqui uma interface chamar aqui de response aqui e vou criar aqui em cima também uma interface data props colocar post props que vai ter um ID que é um Number deixa eu ver aqui ó el tem um ID um title um body então ID title Body e ele tem também um colocar o user ID por exemplo user ID é um Number e eu vou falar aqui quando a gente recebe da requisição a gente recebe uma propriedade chamada

posts que dentro então tem os nossos posts então aqui dentro a gente recebe uma propriedade posts que dentro a gente tem uma Array de post props tá então quando a gente faz uma requisição depois como a gente tá usando fat eu vou usar aqui o conch data iG aight response Jon tá então a gente espera transformação em e como a gente tá usando o typescript eu vou falar então dois pontos que o o objeto que a gente recebe é esse response vou chamar aqui de response props então a gente recebe esse response props aqui beleza

então se eu coloco o mouse em cima agora olha que legal já tá aqui se eu der um console.log nesse data Olha que interessante a gente tá dentro do corpo do nosso componente aqui fazendo uma requisição http e embaixo tá sendo aqui os itens do nosso componente então se eu salvar e eu voltar aqui no meu barra posts e eu der um ent aqui um F5 se a gente abrir aqui o nosso CMD Deixa eu tirar um pouco o zoom você vai ver aqui ó olha que legal como a gente tá no server Side olha

aqui o nosso nossos itens sendo renderizados no lado aqui né do Servidor aqui no nosso CMD então a gente já vê aqui ó todos Nossa ele busca vários posts né Deixa eu ver aqui vários e vários posts aqui ó vários posts então a gente consegue fazer a renderização do lado do servidor e quando chega aqui pro usuário já tá render já tem os itens buscados da api eu posso por exemplo renderizar posso abrir aqui por exemplo uma colocar uma div aqui um data.on posts.map vou abrir cada post por exemplo E aí dentro eu posso renderizar

cada post por exemplo uma div propriedade Key post pid Vou colocar aqui um H2 abre e fecho aqui post.on Tile e vou colocar também embaixo Aqui ó uma um parágrafo post ponto colocar aqui B né então maravilha se eu salvar isso aqui agora olha que legal se eu atualizar quando chega aqui para mim ó você percebe que já tem os posts sendo renderizados Vamos só melhorar um pouquinho a visualização para não ficar tudo grudado aqui né então a gente pode colocar aqui uma div colocar um Class como Flex Flex colum um GAP de dois colocar

de quatro aqui para distanciar cada post cada iten Zinho aqui dentro aqui na nossa div eu vou colocar um Class name BG Grey traço 200 um p de do colocar um p de qu aqui ó para ficar um pouco mais distanciado beleza vou colocar aqui aqui também um MX de do para dar um distanciamento na esquerda e na direita vou dar aqui também o nosso rounded MD para dar um arredondamento na bordinha o nosso title aqui vou dar um Class name fonte traço bold só para ele ficar pra gente saber que é o título né

E aqui no nosso H1 vou dar aqui um Class name text Center e um MT de C aqui só para dar uma distanciada um MB de do para distanciar um pouquinho embaixo e o fonte de bold aqui text tro 3xl deix um pouquinho maior tá então aqui a gente tem todos os nossos posts tá não tô ligando muito para estilização por enquanto então a gente percebe que se você dá um F5 aqui ó quando você recebe aqui quando carrega visualmente no lado do client você já tem os posts você não tem aquele efeito de loading

aqui porque isso tá sendo renderizado pelo lado do server a gente tem um componente que é server component então quando chega no lado do client já tá renderizado se a gente criasse uma página que tem um lado client Olha só olha a diferença Vou criar outra página aqui tá vou criar aqui dentro do app new folder vou chamar de teste vou criar aqui uma New file page.ts eu vou pegar aqui o nosso componente deixa eu pegar aqui o post deixa eu copiar só a parte do da div aqui ó Beleza vou colocar aqui um R

funk só para criar e page test Beleza eu vou colocar aqui o nosso H1 colocar só o H1 por enquanto e página client só pra gente ter V dar um enter Zinho aqui para quebrar vou salvar isso aqui agora então agora vou vir aqui e vou transformar ó use client dessa forma a gente tá transformando toda a página Test em US client então se eu salvar isso aqui agora se a gente acessar barra test foi o nome que eu dei Olha lá página client Beleza e como a gente usou o US client eu não posso

mais usar aqueles recursos que a gente acabou de usar então por exemplo se eu copiar aqui o que a gente fez aqui ó né que é a requisição dentro do componente ó e eu colocar aqui ó assy transformar nosso componente assíncrono e aqui dentro eu tentar o usar ó e eu salvar isso aqui vou até tirar a tipagem só para não ficar dando erro de tipagem e eu salvar isso aqui agora e eu atualizar esse barra teste você vai ver que ele vai acusar erros aqui e ele vai falar olha se você tá usando aink

a weight eles não são suportados dentro de um clar component only ou seja apenas no server component agora esse nosso componente ele é renderizado no lado client então a gente perde isso aqui mas a gente ganha o que então Mateus a gente ganha um componente react padrão Ou seja posso ter use state posso ter use effect então eu posso por exemplo vou criar aqui um US state por exemplo um conch eh vou chamar aqui de posts set posts igual use state V dar um Tab aqui para ele importar vai começar com a r vazio eu

quero criar um use effect para buscar da nossa api então use effect por exemplo né um use effect padrãozinho aqui beleza vou dar um Tab aqui para ele completar para mim e maravilha então ele criou um use effect aqui que ele vai fazer um fat quando o fat der tudo certo ele vai transformar em Jason e aí quando transformar em onde a gente vai passar os nossos posts lá para dentro aqui dos nossos posts Beleza então aí pra gente renderizar deixa eu pegar até o nosso Array lá renderizado aqui do nosso barra posts aqui ó

pegar aqui o nosso arrei beleza e vou renderizar aqui posso acessar os post diretamente que é o nome do nosso US state e aqui ele vai dar que ele não encontrou a tipagem Vou colocar aqui a nossa tipagem dois pontos n só para ele parar de acusar o erro que não importa para mim a tipagem Então vou salvar isso aqui e precisamos tirar o assn aqui também salvei Então essa a forma padrão do componente client e olha a diferença vou vir aqui a gente tá no Barra test que é o componente renderizado no client ó

vou dar um cont control F5 aqui olha lá ele dá aquela piscada por quê Porque renderiza um componente chega aqui pra gente ou seja o nosso layout aqui por exemplo E aí aqui quando chega na parte client ele vai disparar um Side effect ou seja o nosso use effect para fazer a requisição quando tiver requisição ele mostra ele passa pro nosso US state E aí reflete essa renderização que renderiza aqui o nosso post e então com isso a gente tem aquele layout shift né que é renderizar que às vezes é tudo bem Você quer que

seja dessa forma mas às vezes não faz tanto sentido você quer trazer já os dados prontos por exemplo renderizados né então a gente Dessa forma tem um componente client onde a gente consegue ter acesso à reatividade como US state aqui a gente pode ter acesso por exemplo a Button por exemplo Button eu posso ter teste eu posso ter um on Click vou dar aqui uma função anônima por exemplo Alert test eu posso ter isso de forma então eu posso ter algo de dinâmico na nossa aplicação porque ele é um componente client então se eu salvar

a gente colocou um botão lá embaixo né Deixa eu vir aqui embaixo ó nosso botão teste vou subir esse botão ó subir esse botão aqui em cima depois do H1 vou colocar ele aqui ó Então se a gente olhar tem um botãozinho um botão chamado teste se eu clicar ó tem um efeito de um clique uma reatividade Então a gente tem esse efeito aqui olha lá ele demora um pouquinho agora se a gente acessar o nosso barra posts Ó você percebe que quando carrega o post ó tô dando cont control F5 aqui ó ele já

aparece renderizado porque ele lá do lado do servidor Beleza então se a gente voltar aqui na parte do server component no nosso barra posts e quando a gente tá dentro de um server component a gente não tem acesso por exemplo a US state dentro do componente server então por exemplo se você tentar aqui dentro do seu componente ó tô aqui no nosso componente de posts que é um server component né se eu vier aqui tentar criar uma US state ó conche V dar aqui um teste set test igual use state vou dar um Import aqui

a eu vou criar um estado aqui ó teste ah vou vamos mandar aqui para nome e nome e aí o nome vai ser Mateus Por exemplo Beleza se eu salvar aqui ó olha que interessante ele vai falar pra gente que eu não posso né usar o News state eles são apenas ó react hooks only works ou seja ele apenas funciona em client component então quando a gente tá num componente server eu não tenho acesso a essa reatividade por quê Porque como que vai ser reativo se ele vai ser renderizado e criado lá no lado do

servidor quando chega para mim ele já só devolve né ele cuspe ali pra gente é o que a gente já tem e que foi renderizado e que foi gerado lá no lado do server então a gente não tem acesso a isso aqui então você pode ver que eu não consigo usar isso aqui tá mas aí você pode estar se perguntando uma coisa importante né ah Mateus beleza como é que faz então para mim ter a junção desses dois caras para ter algo reativo para ter algo dinâmico porque por exemplo eu quero ter um server component

que busca api legal demais mas eu quero ter também é um Client component que tem ali junto alguma reatividade eu posso renderizar um server component e dentro tem um client component você pode então você pode fazer o qu Você pode ter um server component e dentro do seu server component Você pode ter um client component Beleza você pode fazer isso sem nenhum problema então por exemplo se eu salvar aqui ó eu posso criar aqui eu vou criar aqui dentro do nosso components tá vou criar aqui por exemplo um New Folder vou chamar de buton dentro

desse buton vou criar um New file index.tsx e eu vou criar aqui um botão então Export function Button beleza return Maravilha quero colocar aqui uma div um Button por exemplo alterar nome aqui tá Então esse é um botãozinho aqui E lembra que sempre que eu falei para vocês que quando a gente cria uma página cria um componente sem especificar aquele usic Cent ele é um componente que ele é gerado pelo pelo lado do servidor então sempre no next quando você criar sem especificar ele é um componente server component Mas lembra que a gente não quer

eu quero que ele seja um use client Beleza então a gente falou que é um use client agora eu ganho tudo a reatividade Então posso por exemplo vou colocar aqui por exemplo nosso const nome set nome igual use state só pra gente ver que eu posso ter um estado aqui então vai ser sujeito programador vou criar uma função handle handle Change name Beleza então vou criar uma função handle Change name aqui eu quero criar ela como uma function normal aqui ó para ficar melhor aqui para vocês no vídeo e quando você clicar no handle Change

name ele vai mudar de sujeito programador para Mateus Fraga então no botão Quando você clicar on Click handle Change name então a gente criou aqui um componente ó use client que tem reatividade que troca que faz alguma ação salvei agora eu posso importar sem nenhum problema dentro de um componente que é server não tem problema Olha só todos os posts posso importar aqui o nosso Button V dar um Tab aqui ó deixa eu ver se ele já importou para mim ó ó já importou aqui para mim qualquer coisa importa o caminho se eu salvar isso

aqui agora você vai ver aqui ó alterar nome Ó posso clicar não tem nenhum problema vamos colocar lá no nosso button para exibir aqui embaixo vou dar um BR aqui ó e eu vou colocar aqui por exemplo um H3 abre e fecha os Chaves e eu vou colocar aqui o nosso US state nome para ser exibido colocar aqui até um nome dois pontos salvei Então olha só se eu der um F5 Ó você percebe que tem o nosso botão alterar nome tem o nosso US state sendo renderizado aqui sem nenhum problema e o Next vai

trazer o que é do componente server sendo renderizado pelo lado server e como a gente tem um componente client aqui no meio dele beleza essa parte aqui esse componente é renderizado pelo lado do client o restante não tá então ele faz essa essa parte de forma inteligente tá então nosso botão tá aqui ó se eu clicar em alterar o nome Olha lá Mateus Fraga então consigo ter essa reatividade sem nenhum problema então posso ter um componente server e dentro ter componentes client Além disso quando a gente tá dentro de um componente server a gente pode

também ter vou dar aqui a gente pode ter também um carinha que a gente chama de actions server Actions aqui para manipular algumas ação por exemplo e eu não posso dentro de um componente server vou tirar aqui o botão tá vou tirar o Import dele só para não ficar atrapalhando a gente no vídeo ó deixa eu tirar e eu salvar ó quando eu tô num componente server eu não posso como eu falei para vocês ter um botão então por exemplo se eu tivesse aqui um Button e eu colocar aqui por exemplo buscar posts e eu

tentar aqui ó colocar um on Click handle fat posts vou criar uma função aqui por exemplo eu vou criar essa tirar esse console daqui assy function handle fet post então criamos uma função normal se eu colocasse aqui um console P log clicou e eu salvar isso aqui agora olha o que que vai acontecer ele vai falar aqui pra gente que eu não posso ter uma reatividade né se eu não tô dentro de um componente client e eu não sou porque eu estou dentro de um componente server Mas tem alguma forma da gente fazer isso tem

eu posso chamar um on Click e falar que essa função esse cara aqui ele é uma função que executar estado no lado server e não dentro do lado client com isso a gente pode passar uma diretiva aqui dentro da função chamada use server Olha que interessante né então se eu salvar isso aqui agora ele vai deixar porque isso aqui é um comp é uma função e que é gerada e criada com o nosso US server então se eu clicar aqui por exemplo em buscar post ele tem que mostrar um console Olha só se eu abrir

o nosso inspecionar e eu olhar o nosso console você percebe que o nosso console que a gente deu não aparece aqui no lado client se eu tô no navegador e eu ab inspecionar fui em console Ele não tá aqui cadê o nosso console Lembra que eu falei que ele é US server Então essa função Esse cara é chamado no lado servidor então por isso que ele funciona e a gente tá dentro de um server component Então olha só se a gente olhar aqui o nosso CMD vamos vamos lá embaixo olha aqui é o clicko ó

vou ficar clicando várias vezes aqui ó cliquei várias vezes aqui se a gente olhar olha um monte de clicko aqui tá então a gente consegue né se caso a gente queira fazer alguma server Action A gente pode ter dentro de um componente ser sem nenhum problema tá então isso é sensacional até dentro de um client a gente consegue dentro do client criar um uma função que tenha use server chamar ela sem nenhum problema também Beleza então aqui por exemplo ó eu poderia deixa eu copiar aqui a nossa requisição colocar a nossa requisição http eu vou

colocar aqui um console pon log nesse nosso data aqui ó data.on posts pra gente ver os posts então se eu salvar Ó você a gente olhar o nosso CMD não tem nada vou clicar aqui em buscar posts vamos ver olha lá devolver os posts para mim aqui ó olha que legal né então a gente pode fazer as nossas server Actions e a gente pode também ter formulário com Actions server sem nenhum problema por exemplo eu posso ter aqui ó vamos colocar aqui um formulário a tag de form dentro da tag de form Eu quero ter

um input vou colocar que ele é do tipo Type text ele vai ter um Place holder por exemplo ID do usuário e eu quero ter uma então uma Class name Border border grade 200 P de2 E aí eu quero ter o nosso Button que vai ser por exemplo buscar usuário e eu vou colocar aqui uma Class name BG Blue texto branco e eu vou colocar também que como a gente tá dentro de uma tag de form se a gente olhar aqui eu posso passar aqui um Type submit né que é um tipo submit então a

gente criou um formulário vou dar aqui pro nosso formulário só para ficar um pouquinho melhor aqui V dar aqui uma Class name FX GAP de do e um MT de4 aqui só para distanciar tá um m de 4 aqui para distanciar em cima e embaixo Olha lá temos aqui nosso carinha né maravilha então esse nosso formulário Se a gente fosse fazendo um react padrão por exemplo a gente poderia aqui um unsubmit que é para submeter um formulário por exemplo a gente pode criar uma outra fun ass function vou chamar essa função aqui por exemplo de

handle search users Maravilha vou falar que essa função ela vai ser executada ó no lado server e vou colocar aqui um console pon log Test e vou pegar essa função e vou passar no nosso on submit se eu salvar isso aqui agora e eu atualizar quando eu vier aqui e eu clicar em buscar ele vai Ele até vai funcionar por que que ele vai funcionar Porque mesmo que a gente chama um onsubmit que é lá do client a gente passou que o nosso handle search ele é uma componente ele é uma função com us server

se eu tirar o US server daqui e eu salvar ele vai dar o erro que a gente não pode usar o on submit então quando a gente tá geralmente trabalhando com as últimas versões do react e dentro do do Next com server component é legal ao invés de usar o One submit a gente poder usar aqui o a própria propriedade chamada Action e para ela eu passar a nossa função handle search user transformar aqui com use server beleza pra gente poder ter acesso a isso e como que eu pego Então o que o usuário digitou

dentro do input se eu não posso ter um US state a gente pode pegar já que a gente tá usando Action A gente pode pegar através da propriedade name então por exemplo olha eu quero identificar esse campo como user ID nessa forma aqui ó beleza então agora como é que eu pego lá lá dentro aqui do nosso handle search como a gente tá atrelado a uma Action do formulário aqui dentro eu posso pegar um item chamado form data dois pontos que é do tipo form data e aí eu posso pegar por exemplo conch user ID

igual a form datata pget E aí aqui dentro o parâmetro o seu user ID Vamos colocar aqui o console só pra gente visualizar salvei aqui vou digitar aqui o id10 por exemplo buscar usuário Se eu olhar aqui ó olha aqui o id10 né já tá aqui ó id10 deixa eu atualizar aqui ó colocar aqui ó id5 agora buscar usuário ó lá id5 então consigo pegar o que o usuário digitou com essa forma olha que massa sem ter a reatividade por exemplo eu posso fazer uma requisição http deixa eu pegar aqui ó depois que eu pegar

o ID fazer uma requisição essa api ela tem uma Ela também tem uma rota barra posts bar user eu vou transformar aqui com o nosso Cras com o nosso template string né aquelas pinhas dadas barra cifrão abre fecha os Chaves eu V vou passar o ID do usuário aqui ó ele vai trazer os posts desse usuário Vou colocar aqui um console nessa propriedade data então se eu salvar isso aqui agora e eu atualizar isso aqui eu vou tentar procurar Sei lá o id5 buscar usuário vamos ver olha lá o ID 5 do user ID ele

tem dois posts né dois posts aqui olha que legal né então a gente consegue ter também inputs buscar algo sem a necessidade de ter um US state de ter a reatividade dependendo o caso de uso que você quer então uma coisa legal que o server component Traz essa praticidade da gente fazer aqui tanto comunicar com uma API quanto se você tivesse um banco de dados atrelado aqui o seu o projeto next já chamar ele aqui dentro do componente sem nenhum problema tá e a gente pode ter ó toda a parte também de criar server actions

dentro de um componente ou até acessar um input através da nossa Action com o server Action aqui muito massa então a gente falando aqui sobre server component e Client component server Actions e agora como que a gente consegue ter rotas dinâmica dentro da nossa aplicação por exemplo eu quero acessar esse post aqui posts bar id1 por exemplo como que a gente faz isso então aqui dentro como a gente tem rotas na nossa aplicação eu vou vir aqui dentro do posts eu quero que seja barra posts barra ID então barra posts que é aqui dentro né

onde tem a page vou criar mais uma page aqui dentro abro o coet e vou chamar de ID que é o nome do parâmetro Então dentro do posts eu criei uma pasta com o colchete ID então falando isso é dinâmico e dentro dessa pasta New file page.ts E aí eu posso criar aqui Export default function vou chamar aqui de detail post return E aí aqui dentro uma div um H1 aqui detail do po Então como é que eu acesso essa página aqui agora como a gente falou que é um ID dentro de barra posts Ó

Barra posts E aí o ID então barra posts barra Opa barra1 por exemplo ó se eu acessar Olha lá detalhe do post Olha que legal né E como é que eu pego o ID que você me mandou lá da Rota a gente recebe através de propriedade então eu posso pegar aqui dentro desse nosso barra posts aqui através de propriedad então Pego aqui ó abre e fecha Chaves vou dar aqui um eu recebo parms Opa parms aqui depois da chave dois pontos abre e fecha o Chaves novamente só pra gente criar tipagem do typescript parms dois

pontos abre e fecho aqui ou vou colocar direto ó parms ele é do tipo Promise abre fecho sinalzinho de mar menor com abre e fecha Chaves Qual que é o nome que eu dei eu falei que é um ID então ID string Beleza então a gente recebe uma propriedade parms que dentro né ele ele é como uma Promise e lá dentro tem um ID Então como que eu recebo isso aqui dentro do componente con igual a parms aqui e eu posso pegar aqui dentro o ID E lembra que eu falei que isso aqui é uma

Promise então eu tenho que usar aqui o await pra gente usar o await no componente eu preciso transformar o nosso componente aqui assim function que a gente já conheceu então se eu salvar e agora eu quero colocar aqui ó detalhes do post dois pontos abre e fecho aqui e vou passar o nosso ID aqui pra gente visualizar salvei Olha lá detalhes do post 10 se eu acessar post 35 ó detalhes do post 35 muito legal né então a gente já consegue acessar essa página dinâmica e fazer requisição por exemplo é essa URL aqui da pi

acho que ela tem também eu vou copiar aqui essa URL api vou vou até dar um Export aqui ó Nessa post props Export Vou salvar aqui e a gente pode vir aqui no detalhe da pi depois que ele buscar eu quero fazer uma requisição para buscar os detalhes do post com esse ID então vou passar aqui o ID só que vai mudar um pouquinho acho que a rota né a rota aqui vai ser na verdade barra posts barra e aí o ID beleza e aí aqui eu vou trazer apenas o nosso post props ele já

vem as props do item e agora eu quero exibir aqui embaixo então por exemplo eu quero exibir o data ponto eh colocar dentro da do do H1 aqui H2 ó data.on Tile vou duplicar aqui vou colocar dentro de um parágrafo aqui o data.on body colocar um parágrafo aqui vou salvar isso aqui agora salvei se a gente olhar aqui ó post 35 ó tem um post 35 por algum motivo tem um post 35 então ó já buscou os detalhes dele Olha que legal né e dentro do posts aqui ó a gente pode colocar até um linkzinho

para ele Navegar pro ID desse post aqui ó então por exemplo dentro lá do nosso barra posts page que é onde a gente lista todos os posts aqui ó posso colocar aqui nossa tag de link ó vou dar um Tab aqui do Next ele vai importar aqui do Next bar link e aí a gente pode fazer olha ver detalhes desse post ou acessar acessar detalhes e o link eu quero que seja HF abre e fecha os Chaves aqui abra aqui o nosso crase barra posts que é a nossa rota né barra posts barra cifrão abre

fecha os Chaves post pid para navegar Então paraa nossa página barra posts bar oid que do post que Você clicou então se eu salvar deixa eu colocar aqui um uma corzinha Class colocar aqui um text traço Blue 500 Olha lá vou clicar por exemplo nessa aqui ó Don Dave wasn't então vou clicar aqui ó cliquei Olha lá barra posts bar 6 e olha lá detalhe do post 6 e já tá aqui os detalhes desse post E olha que legal né então isso é muito massa que a gente pode fazer uma página de forma dinâmica dessa

forma aqui onde a gente consegue pegar então o parâmetro que eu chamei de ID se você tivesse chamado aqui por exemplo com outro nome seria o nome que você vai receber aqui como eu chamei de ID então eu recebo ele através desse nome ID a gente espera o parâmetro chegar e aí eu posso por exemplo fazer uma requisição como a gente tá no lado server posso já fazer a requisição Sem problema então voltando aqui pro nosso guia né de rotas dinâmicas que a gente aprendeu Como criar uma rota dinâmica show de bola e agora a

gente vai falar sobre um assunto muito importante quando a gente tá criando um componente que ele é um componente server que a gente pode fazer streaming aqui dentro ou seja a gente tem um componente server aqui por exemplo para buscar os detalhes de um post Mas e se esse essa essa api demorar para me responder que que vai acontecer então por exemplo é Vou colocar aqui em cima do nosso fat vou dar aqui um conche ou vou dar só um await direto ó New Promise resolve ele vai dar um resolve quando não tiver um set

time out Vou colocar aqui por exemplo que quando o o time out acabar ele vai chamar o resolve e eu vou colocar aqui que ele vai demorar 4 Segundos para acontecer então como a gente tá usando no await ele só vai fazer a requisição E aí devolver aqui visualmente pro usuário quando ele acabar isso aqui então primeiro ele vai ter que passar aqui vai demorar quatro segundos para passar então só para simular como se a pi tivesse lenta e olha o que que acontece se eu pegar aqui ó vou copiar vou fechar e vou tentar

abrir ó vou dar um enter olha só tá bloqueado então a gente bloqueia o acesso basicamente porque ele tá passando pelo server ó e aí quando acabar ele devolve então acontece que às vezes você tem que tomar cuidado se você tá construindo algo que realmente Você viu como acaba com a experiência do usuário isso então Caso seja algo que realmente você precisa ou que né Tenha ali um controle que não vai demorar então não tem nenhum problema mas quando a gente faz isso você acaba acabando e e Acabando um pouquinho com a experiência e ficando

bloqueado a gente pode fazer de duas formas para melhorar essa experiência pro usuário com o Next então a gente pode por exemplo vir aqui dentro da nossa aplicação e eu posso como a gente tá dentro da Rota bar posts barid ó Então dentro da Rota do ID que eu coloquei isso aqui né coloquei aqui dentro da Rota dinâmica eu posso vir dentro dela New file criar um arquivo chamado loading loading ptsx e a partir da hora que a gente cria esse cara aqui eu preciso dar um Export default function loading E aí retornar alguma coisa

poderia ser com um componente indicando por exemplo um H1 carregando né algum componente com alguma animação alguma coisa então beleza salvei isso aqui agora esse cara aqui vai acontecer que ele vai entrar em Ação quando esse componente demorar ali tiver carregando lá então se eu der um cont control F5 ó percebe que tá carregando e aí quando acabar o resto que não fazia parte desse cara desse componente como o nosso layout que não tinha nada para ser carregado você percebe que ele já tava renderizado ó vou copiar vou abrir de novo ó abri ó o

layout tá carregado e aqui tá carregando então todo o nosso componente enquanto ele não é carregado ele vai mostrar o componente que a gente colocou de loading olha que massa né de forma massa aqui ó Simples então por exemplo Vou acessar aqui posts Vou acessar um detalhe aqui ó acessei os detalhes ó carrega carregando e perfeito até ele carregar né a gente colocou 4 Segundos então a gente pode fazer dessa forma como a gente pode colocar essa essa parte de de streaming basicamente para você sinalizar onde que tá carregando apenas no local também e não

no componente inteiro se você quiser como que a gente poderia fazer isso então para a gente entender eu vou vir aqui no nosso loading só para ele parar de funcionar vou renomear ele aqui vou colocar um underline na frente só para ele parar de funcional se eu dar um F5 agora a gente bloqueou de novo né como eu coloquei o underline Então como que a gente pode fazer isso aqui dentro a gente vai mover para um componente então por exemplo dentro aqui do nosso ID eu vou criar uma nova pasta underline components e dentro dela

New file eu vou chamar aqui ela aqui de por exemplo post ptsx tá então criamos aqui Export default function não precisa do default aqui ó Export function vai se chamar aqui vou chamar aqui de post info beleza Esse vai ser o nome aqui do componente return show de bola E aí aqui dentro Eu quero trazer por exemplo a parte do componente essa partezinha aqui do do nosso componente ó é o uma div E aí aqui dentro vai aparecer o título e o body e eu vou trazer essa requisição e o nosso Promise aqui para dentro

desse componente vouer trazer aqui para dentro Export vou colocar assn function para ele fazer essa requisição Vou importar aqui o nosso post props portar aqui beleza então aqui a gente tem o nosso componente salvei aqui e agora lá no nosso componente aqui eu vou tirar essa parte aqui e agora a gente vai chamar aqui o nosso post info vou dar um aqui Maravilha importou aqui o componente e claro né a gente precisa receber o ID aqui como propriedade Então nesse componente abro aqui recebemos o id o id dois pontos e string aqui beleza então a

gente recebe o ID como propriedade e faz a requisição e aqui então a gente precisa passar esse id o id a gente recebe a URL né então Passamos o ID para lá então agora a gente só criou aqui dentro da nossa página criamos um componente chamado post e lá dentro ele faz a requisição http ele é um componente server né então ele faz a requisição http e beleza e depois exibe aqui show de bola e a gente colocou aqui o delay de 4 Segundos para simular que ela demora então salvei por enquanto ó continua a

mesma coisa ó bloqueando ali ó deu um F5 ele começa continua bloqueando como é que a gente faz para ter aquele streaming apenas aonde é o post por exemplo onde que tá sendo a requisição apenas aqui você percebe que aqui no nosso H1 ó text 4xl fonte traço bold ó percebe que deixa atualizar aqui de novo ó que ele não tem nada é aqui embaixo que a requisição é feita tá então o que a gente vai fazer é em volta do componente a gente vai usar um carinha do react chamado suspense Então vou dar um

Tab aqui dentro vai o componente que é o componente que a gente faz a requisição que pode demorar em volta vai o nosso suspense e aqui dentro a gente tem uma propriedade chamada fallback o fallback aqui basicamente a gente pode passar o componente que você quer aqui dentro que seja renderizado enquanto isso aqui tá carregando então se eu salvar isso aqui agora olha lá e eu atualizar você percebe que tá lá carregando que é o que a gente colocou e aonde não é a parte do load Então nossa página aqui ó tem o H1 que

é o detalhes aqui eu vou dar aqui até um text traço Center text traço Center vou dar um enter aqui ó salvei e eu vou atualizar Ó você percebe que ele já tá aqui ó só a parte de baixo que é onde tem o nosso post info que tá carregando lá olha que legal né então só essa parte aqui então quando a gente tem um loading demorado a gente pode usar dessas duas alternativas ou usar o loading que a gente mostrou só que daí toda a página entra no load ou você pode usar o suspense

e dentro renderizar o componente que faz a requisição por exemplo que busca lá que pode demorar E aí enquanto ele tá carregando ele vai executar ou seja vai renderizar o que a gente passar dentro do fallback então isso a gente tem aqui dentro do nosso next como streaming né se a gente procurar aqui ó por streaming a gente vai ver aqui ó loading e and streaming então a gente pode ter a nossa página renderizada e dentro essa parte azul por exemplo que busca alguma coisa dinâmica que caso demore você pode colocar esse fallback então só

aquela parte ali mostra carregando ou você pode usar na página inteira criando né um arquivo loading aqui e aí quando tiver carregando ele vai mostrar esse loading aqui no lugar Beleza então são duas alternativas que a gente pode fazer lidando com isso aqui usando esse caso de uso aqui caso demore né então só pra gente ver bem quando está carregando o que que vai vai ser renderizado e não bloqueia o acesso Então se o usuário acessar aqui ó e a internet tiver lenta aqui ele é mostrado porque isso aqui é é do server component agora

aqui que tava carregando ele mostra ali o efeito carregando ou o componente que você colocar Beleza então se a gente voltar aqui ó a gente também falou sobre loading ui and e streaming né então a gente falou sobre loading ui and streaming e outra coisa que a gente tem muito dentro do Next aqui é revalidate e caching então por padrão quando a gente faz uma requisição http com por exemplo aqui vamos no nosso barra posts aqui ó posts e page aqui a gente busca todos os posts certo eu vou Minimizar aqui as função zinha aqui

a gente busca todos os posts e depois exibe né a nossa lista de post aqui embaixo Beleza então aqui dentro quando a gente faz uma requisição usando fat a gente tem acesso a algumas propriedades se a gente olhar aqui dentro ó do Nossa propriedade aqui ó data fetting data fetch and caching a gente pode quando faz um fatch tem acesso aqui ó ao Cash Deixa eu ver se eu acho aqui de forma rápida pra gente a gente pode passar algumas propriedades para o nosso fat como Cash e a gente tem algumas propriedades aqui dentro que

a gente pode passar então aqui dentro ó se a gente olhar aqui Deixa eu procurar aqui que fica mais fácil ó Force Cash Force Cash deixa eu ver aqui Cash acho que é aqui for cas aqui ó aqui então dentro do nosso fat a gente pode passar algumas propriedades como o Cash e dentro do Cash se a gente ver por padrão o exemplo a gente tá fazendo uma requisição aqui que a gente não tá passando nada então por padrão no next 15 que é o atual que a gente tem hoje em dia por padrão ele

vai colocar aqui como no Store ou seja ele vai colocar toda vez que você fazer uma requisição vou até traduzir para vocês ele vai buscar da api algo dinâmico né então o Next busca toda vez o servidor cada solicitação que você fazer então não tem Cash nessa requisição mas ah Mateus eu quero que como é que você pode fazer Você pode você pode vir aqui no seu fat passar aqui uma vírgul Zinha abre e fecha Chaves e você passar aqui a o parâmetro cche e você colocar aqui por exemplo que você quer um Force Cash

Então dessa forma você vai falar que você quer um Cash para essa requisição quando você for fazer E além disso Você pode passar aqui next dois pontos abre e fecha os Chaves e pode passar uma propriedade revalidate que é quando enquanto tempo vai acontecer essa revalidação de dados dessa chamada aqui então por exemplo eu coloquei 60 segundos aqui certo que é em segundos aqui se o usuário acessar a sua página ele vai fazer a requisição e vai renderizar lá os dados se a gente acessar esses dados aqui antes que passe 60 segundos ele vai pegar

do Cash e não vai fazer uma nova solicitação pro servidor para fazer uma nova requisição http então ele usa essa revalidação com isso a gente ganha muito mais performance né em muitas rotas que você não quer que tenha ã algo que seja dinâmico totalmente né Para que buscar toda hora da requisição se é uma rota que não tem muitos dados que vão mudar toda hora então você pode fazer uma revalidação você pode fazer um Force cash ou você pode fazer um revalidate passando Sei lá acho que 3.600 é uma hora por exemplo Ah eu quero

que de 1 em uma hora ele vai buscar os dados atualizados lá da api senão ele vai usar os dados que ele tem em cash então a gente pode fazer isso lembrando por padrão atualmente ele vem como no Store então ele vem eh como Toda vez que você entrar no site né ele vai buscar lá da api agora se você usar um Force Cash e ainda passar um revalidate ele vai fazer um Cash primeira vez que você acessar e se você acessar de novo antes do tempo do Cash ele vai usar o Cash aí e

depois só que acabar esse tempo de revalidate aí ele faz uma nova solicitação tá isso é muito importante a gente entender então isso a gente pode usar em requisições aqui mas também a gente pode usar dentro de componentes ou revalidate porque toda vez que a gente cria um componente por exemplo na nossa página home no next quando eu crio um componente criamos aqui o nosso home ele gera esse componente um componente server ele gera um componente estático ou seja se a gente olhar aqui ó e eu criar um JavaScript ó con Random Number igual math

P Random vou gerar aqui um vezes 10 então ele vai gerar um número de 0 a 10 ali tá e eu vou colocar aqui ó colocar aqui em cima aqui ó e colocar embaixo Aqui ó H2 número gerado e eu vou colocar aqui o nosso Random Number então colocamos na home se eu acessar minha página home aqui ó você vai ver que ele gerou número ó se eu atualizar ele vai ficar deixa eu dar um zoom para vocês ó ele vai ficar gerando o número só que a gente tá em desenvolvimento só que como eu

não passei nenhum revalidate é só um componente server que eu não passei nenhum revalidate então esse componente quando a gente gerar o build da nossa aplicação esse componente essa página vai ser gerada de forma estática o que que isso quer dizer olha só se eu salvar tá vendo que ele gera toda vez mas se ele for gerado de de forma estática ele vai gerar a primeira vez que o usuário acessar depois ele não vai gerar mais vai ficar só aquela página lá então a gente tem que tomar cuidado com os casos de uso então só

para você ver na prática antes da gente aplicar o revalidate se eu salvar isso aqui e eu voltar na minha aplicação ó eu D npm Run build vamos gerar o build da aplicação como se a gente tivesse gerando o Build para publicar então ele vai gerar o build vamos lá beleza Tá gerando as páginas aí e você percebe ó aqui ele fala tá quando tem a bolinha são páginas que são geradas pré renderizadas estáticas o conteúdo quando tem o f que são páginas e com server rendering né ou seja são renderizados sobre demanda são páginas

dinâmicas tá então a gente tem por exemplo post aqui ó aquele post barid são vários posts são renderizados de forma dinâmica né porque cada ID é um post então ele sempre vai ser de forma dinâmica o Barra post a gente não ó tá vendo o nosso home que é a bolinha aqui ó ele tá com uma bolinha também então é apenas uma única vez vamos rodar o nosso projeto é como se tivesse sem sem desenvolvimento então npm Run start aqui ó olha como é que ele vai se comportar vamos lá beleza rodou vou vir aqui

vou dar um F5 né então agora tá rodando não movimento mas sim como se tivesse em produção então atualizei você percebe ó que eu tô atualizando ele gerou um número mas ó ó o número aqui ó não atualiza mais porque a primeira vez que ele gerou o build ele gerou essa página estática Então a primeira vez que é gerado ele gerou lá o número lá e ele não é mais regerado isso aqui por quê Porque é um conteúdo gerado de forma estática Então a gente tem é uma página gerada de forma estática tem muuitas das

vezes que a gente quer gerar de fato uma página no nosso projeto que eu quero que seja estática não tem necessidade de ficar alterando Então você ganha muito mais performance eh do que toda vez que o usuário acessar tem que buscar Dapi ou fazer alguma coisa ou você quer buscar uma única vez e depois que buscou ele gera a página estática Beleza então essa é uma forma só que no meu caso vamos supor que eu não queria eu queria que a cada 60 segundos tivesse uma revalidação Então se o usuário acessou primeira vez ele gera

a página e qualquer usuário que acessar antes dessas 60 segundos aí ele usaria aquele nosso Cash caso o usuário aquela página caso o usuário acesse após o tempo que a gente especificar aí ele Gere novamente o uma nova página como é que a gente faz isso então com isso a gente pode usar os revalidate Então posso vir por exemplo na nossa página vamos supor que eu quero aqui na página home eu vou vir aqui em cima da página e eu vou dar aqui um Export conche revalidate e eu passo aqui quantos segundos vou colocar aqui

por exemplo 60 né 60 segundos vou salvar isso aqui então colocamos isso na página home vou voltar aqui agora e eu vou dar um Ctrl C temos que gerar um build novamente npm Run build tá ele vai gerar todo o build gerar os build das páginas todas novamente ó gerando aqui vamos aguardar então olha só ele tá aqui ele tá aqui como pré renderizado estático o conteúdo só que agora a gente colocou um revalidate Então vamos lá vamos girar o npm Run start novamente pra gente rodar como se fosse ução né Beleza vou vir aqui

ó presta atenção eu vou vir aqui e vou dar um F5 ó vou dar um F5 ó gerou aqui se eu der F5 de novo ó percebe que ele não tá atualizando eu vou esperar passar 60 segundos aqui na mágica aqui do da edição vou esperar passar 60 segundos e eu volto Eu acho que já passou 60 segundos aqui eu vou dar aqui um control F5 opa olha o que que aconteceu agora você viu que ele gerou novamente o outro número agora e seu df5 ó ele não tá gerando novamente então ele gera estático ele

gera a página depois qualquer pessoa que acessar antes daquele tempo que a gente especificou que no caso foi 60 segundos ele vai usar aquela página lá então ele ganha muita performance se você tiver massivamente vários usuários acessando você reduz bastante a carga porque ele vai usar essa página aqui e aí quando passar 60 segundos ele vai gerar uma nova e as pessoas vão pegar ó passou 60 de novo e as pessoas vão pegar essa nova página aí o que é muito legal que você ganha bastante performance aí para poder caso você não queira que seja

uma página estática você passa então um Export revalidate então a gente aprendeu que na página se você criar uma página server component e não passar um revalidate ele vai gerar aquilo lá como estático uma única vez e não vai ter alteração de dados tá a não ser que dentro dessa página você tenha um componente eh Client que tenha US state que tem alguma coisa que daí aquilo lá é reativo mas uma uma página que são server ela fica estática agora se você tem por exemplo uma página que é server mas passa um revalidate ela vai

ter de tempo em tempo que você passou essa revalidação de dados tá então isso é muito legal por exemplo aqui na nossa página de posts concorda então por exemplo aqui a gente colocou já um Force Cash e um revalidate de 3600 segundos né É se fosse por exemplo 60 segundos aqui aqui nessa página você também pode passar por exemplo Export conche revalidate no componente na página de 60 segundos então além da requisição que é uma coisa a gente tá passando aqui no componente também e o que é muito interessante Porque pensa que tem 1000 pessoas

acessando o seu site então ele vai gerar ali enquanto não passar esse tempo ele vai usar essa essa essa página depois de 60 segundos ele vai gerar uma nova Então você ganha bastante e performance nisso aí tá evitando que cada vez que uma pessoa acesse você tenha que lá e busque novamente renderize novamente então muito mais processamento aí então uma coisa muito legal que next traz pra gente então já fechando aqui a nossa parte de revalidate cashing e Cash fat que a gente já viu aqui também que a gente pode passar o force Cash passar

aqui também é o Next com revalidate ou passar se você não quer quero fazer uma requisição que eu não quero que tenha Cash aí você tira esse next revalidate e coloca aqui né que já é o padrão hoje em dia que é o no cash Beleza então vou deixar aqui como exemplo para vocês então aqui eu coloquei Até outro exemplo que é muito bacana de como que isso acontece né dentro da requisição http Então quando você faz uma requisição http por exemplo um fet e você colocou um revalidate de 60 segundos e não existia nenhum

Cash ele vai lá busca do Servidor devolve pro usuário perfeito agora se você fazer novamente antes dos 60 segundos ele vai falar olha temos o Cash Então já devolve pro usuário ele não faz uma requisição lá e pega os dados do Servidor isso é muito interessante tá agora né se fazer de novo e ele fala Opa já preciso aqui já passou o tempo dos 60 segundos então ele vai falar vamos fazer um revalidate ele vai buscar lá do Servidor E aí né fazer a requisição e vai devolver então aí pro nosso data Cash e que

devolve pro usuário Então isso é muito legal tá se precisar de revalidate então só uma forma mais visual que tem dentro da própria documentação eh do Next tá E aí faltou duas partes pra gente encerrar isso aqui que tá cara sensacional que é mws E H handlers Então vamos falar sobre mws a gente pode ter mws dentro do nextjs para que que a gente pode usar por exemplo quando você acessar alguma rota ou todas as rotas você fazer alguma coisa fazer uma verificação trabalhar aí por exemplo para bloquear uma rota Você pode ter por exemplo

no nossa casa a no nosso caso a gente tem a rota de dashboard vamos supor que eu só quero que o usuário logado possa acessar o dashboard como é que a gente poderia né então para isso a gente pode por exemplo dentro do src criar um New file chamado middleware PTS tá não é tsx por quê Porque isso aqui não é um componente tá então middleware cuidado na escrita aí também e aqui a gente pode criar o nosso middleware Export function middleware aqui a gente recebe o request tá deixa ele completar aqui mas a gente

vai melhorar um pouquinho isso aqui vou dar um control espaço para ele importar aqui do Next bar server e aqui dentro a gente pode fazer algumas coisas por exemplo conch vou chamar de authenticated igual falso por exemplo simulando que você não tá autenticado aqui poderia até fazer uma requisição http buscar do cook para validar o token então no caso vou deixar aqui falso como se você não tivesse logado e eu posso fazer de uma forma bem simples aqui ó se você acessar por exemplo a rota apenas barra dashboard e não tiver logado eu quero que

redirecione pra Barra home por exemplo então eu vou ver aqui se você request request ponto aqui eu vou mudar esse Import aqui do request eu vou chamar de Next request aqui ó vou mudar o Import aqui e aí request P next URL PP name pstw ou seja se a sua rota que você tá acessando ela começa com barra dashboard se ela começa com barra dashboard e você não tá então exclamação autenticado eu vou fazer o quê eu vou dar um return next response P redirect New URL com URL tudo maiúsculo eu vou redirecionar você para

o Barra que seria a nossa página de home E aí eu preciso passar aqui vírgula o request.url atual tá então dessa forma se você acessar qualquer rota que comece com barra dashboard ele e não tiver autenticado ele vai redirecionar você lá pro home agora caso você esteja autenticado e você acesse isso ele ele vai deixar aqui ele vai cair para baixo porque ele vai pular o if porque você tá autenticado e vai dar um next response PN Como é o middleware ele tá no meio ali ele vai apenas ó deixa seguir o fluxo aí apenas

isso que acontece Então vou salvar isso aqui agora e a gente voltar aqui para testar deixa eu só vir aqui e eu vou parar de rodar e a gente vai rodar em desenvolvimento né npm Run Dev novamente vamos rodar desenvolvimento que a gente estava rodando lá para testar então rodando em desenvolvimento vou tentar acessar o dashboard agora vamos ver aqui deixa ele tá compilando lá ó não deixou eu acessar se eu acessar de novo ó barra dashboard ó não deixou eu acessar então eu não consigo nem acessar aqui ó o Barra dashboard se a gente

colocar aqui ó console.log acesso negado só pra gente vir no servidor ó salvar Se eu tentar acessar aqui barra dashboard vou dar um enter não deixou acessar redirecionou para home se a gente olhar aqui ó acesso negado Olha que legal né agora se você tivesse logado vou mudar aqui o authenticated para true supondo que eu estou logado e que eu tô tentando acessar o dashboard aí ele tem que pular o if e tem que deixar eu seguir então se eu acessar aqui ó barra dashboard Olha lá consigo acessar o nosso barra dashboard agora sem nenhum

problema Beleza então uma forma bem simples aqui mas na documentação também tem até mais exemplos aqui que a gente pode e evoluir esse midware para coisas bem mais complexas igual a gente faz dentro do curso né todo fluxo aqui com uma API que tem o token jwt usando cookies também tá então além do mids a gente pode ter dentro do nosso Next O backend dentro então posso criar api routes ou seja seja rotas api dentro do próprio next então por exemplo a gente pode vir aqui dentro do app criar uma nova pasta chamada api e

dentro dela por exemplo eu quero criar uma rota chamada nova pasta chamada info por exemplo e dentro dela New file chamado h. TS tá então vou criar uma rota aqui Export assn function get o get tem que ser tudo maiúsculo é vamos criar uma rota do tipo get return eu quero devolver por exemplo uma eh name vai ser aqui por exemplo sujeito programador Instagram @ sujeito programador eu vou colocar aqui YouTube sujeito programador Beleza então criamos uma rota api e como a gente cria dentro da pasta app uma pasta api dentro dela a gente cria

as pastas das rotas que a gente quer então no caso eu criei info e.ts a gente criou uma rota do tipo get que só devolve ali um Jason né simulando só pra gente ver Então como que eu acesso acesso a URL no Nossa aplicação barapi bar que é o nome que eu dei então se eu acessar aqui ó não acessou aqui deu um 500 por quê Porque eu só retornei e eu não falei que eu estou querendo retornar um Jason né um api Então vou copiar aqui ó objeto return next response Ou posso devolver até

o response direto aqui se eu quiser pon Jason abro o parênteses e eu vou colar aqui o nosso objeto também posso fazer dessa forma então se eu salvar e eu atualizar aqui agora pronto a gente já tem uma url uma API dentro da nossa aplicação então aqui dentro da documentação se você procurar aqui por How handlers A gente vai ver todos os exemplos tanto na parte que a gente pode criar uma rota get post para cadastrar putch para atualizar Patch delete também qualquer verbo http sem nenhum problema então por exemplo e deixa eu achar aqui

para vocês a gente pode ter aqui rota do tipo post que você recebe alguma coisa do Body do Jason e você pode fazer alguma coisa e devolver pro usuário então você pode fazer isso também pode fazer streaming devolvendo aí né os dados é muito legal que a gente pode pode criar rotas backend atreladas aqui dentro um backend completo A o nosso projeto next Beleza então agora pra gente finalizar H handers aqui agora a gente passou por vários conceitos aqui de uma forma mais prática e não tentando se alongar muito e claro para você que quer

aprender desde o zero a criar projetos profissionais dominar o Next criar sistemas completos tanto com backend dentro do Next A nossa turma tá com as vagas abertas do Full stack pro e com o valor promocional Então tá aqui embaixo na descrição e comenta aqui se você quer ver mais vídeos aqui no canal de Next ou criando um projeto completo com next também comenta aqui que eu quero saber então te beijo aí no próximo vídeo aí do canal