Bem-vindo a mais uma aula do desenvolvimento do aplicativo de portal de notícias. Nesta aula nós vamos focar no back-end, lado do servidor. Então vamos ver, nós vamos aprender a criar um back-end com API que serve dados no formato JSON. Vamos usar o framework express para poder fazer isso. Então vamos lá. Então temos aqui no navegador, lado esquerdo da minha tela, o aplicativo de next.js já rodando aqui. Tem a página inicial, barra artigos, que tem uma lista de artigos. Bem, mas esses dados aqui, né, se você se lembra que volta no editor de texto do lado direito da minha tela, eu tenho esse arquivo chamado artigos.js, que é onde eu armazeno os dados desse aplicativo. É claro que no mundo real não vai ser dentro de um arquivo, mas dentro de um banco de dados. Mas por enquanto a gente precisava de alguma coisa para poder trabalhar. Agora a gente vai fazer o seguinte, a gente vai pegar esse artigo, o portal.js e transferir lá para o back-end que a gente vai criar. Para poder fazer um back-end eu vou fazer o seguinte, note que tem essa parte aqui, né, gazeta, traço mundo, traço tech, traço cliente, traço web, e tem um aplicativo do lado do cliente. A gente vai aplicar de next.js que tem código de JavaScript escrito na maneira de react. A gente vai fazer o seguinte, vamos criar uma nova pasta que é independente do cliente web e que eu vou criar uma nova pasta, vou chamar de gazeta, traço mundo, traço tech, traço servidor. E nessa pasta aqui, nós vamos criar um novo projeto de NPM. Então a gente vai precisar de um novo arquivo package JSN, JSN, JSON. Então eu vou no terminal aqui e vamos fazer o seguinte, vamos abrir uma nova aba ou janela, enquanto o cliente já está rodando. Eu vou dar cd, espaço, ponto, ponto para ir para o diretório acima e eu vou dar cd para o gazeta, mundo, tech, servidor. E aqui eu vou falar NPM, espaço, net, para poder gerar um arquivo package.json. Eu vou usar todos os padrões aqui, então não vou modificar nada, só apertar ENTER até o final. Entra, entra, entra, até, desdece ok, yes, vou falar yes. Então ele gera um arquivo package.json. Você pode mudar essas coisas depois, se quiser, vou deixar mesmo assim. Agora a gente vai fazer o seguinte, a gente vai criar um novo arquivo chamado index.js na pasta do servidor. Então vamos fazer o seguinte, a gente vai escrever em Node.js, isto é, JavaScript no lado do servidor. Para poder fazer um servidor de HTTP, para servir essas requisições de HTTP, vamos utilizar o Express. Express é uma biblioteca, open source, código livre, que você pode usar para fazer um servidor de HTTP no Node. E é bem simples, leve, bem flexível. Você já sabe mais sobre o Express, vou aqui no meu navegador, tem a página dele aqui no GitHub, GitHub.com, barra Express.js, barra Express. Eu vou só dar uma olhada aqui se quiser ler mais sobre isso, mas basicamente, tenho um exemplo aqui que ele dão, que eu vou te explicar. A gente vai fazer assim, primeiro você faz o required do Express, coloca dentro da variável, neste caso constexpress, aí chama o Express como exposto a função, e coloca o valor resultante numa variável, neste caso chamado app, app. Aí depois você define as rotas, os pontos, nos nossos casos, os pontos da API. E depois disso você roda o servidor com app.less na porta especificada, neste caso porta 3 mil. Agora, na hora de definir rotas, sempre é o mesmo padrão assim, você fala app.uverbo.http, também chamado de método, pode ser get, post, put, delete. Neste exemplo é get, então get mais qual o caminho, esse é o primeiro argumento, neste caso o barra que é a raiz. Então get barra, agora quando bater no get barra, se a requisição for para o get barra, vai chamar essa função aqui que é o segundo argumento para a função get. E essa função sempre vai ter a mesma assinatura, que primeiro é o rack, que é um objeto de requisição, e segundo é o res, que é um objeto de resposta. Então request, response, certo? Basicamente para enviar resposta, é só falar res.send, e qualquer coisa aqui, neste caso é um string, então ele vai enviar um string, poderia ser outra coisa como objeto, neste caso ele enviaria um objeto e já atribuía o content type, application.json, a gente vai ver já já. Então vamos lá, aqui de volta o editor de texto, no arquivo index.js da pasta do Gazeta Mundutech servidor, nós vamos fazer o seguinte, require, express, e vamos colocar uma variável chamada express, diminuir a fonte um pouco aqui, aí a gente chama express, express parênteses, tem nenhum argumento e coloca dentro a variável que eu vou chamar app, com a app igual express, aí depois disso faz o seguinte, você define os endpoints, os pontos terminais. Neste caso, será um 2, vou explicar aqui, de volta ao navegador, lá no aplicativo de index.js, a gente tem a página de artigos, que é o índice, uma lista de vários artigos, e tem, se você clicar em um deles, a página, e um artigo específico, então há dois endpoints aqui para essa API, que vai ser o barra artigos, que é get barra artigos, e vai ser o get barra artigos, barra o slug do artigo, que é esse título separado por trás, na URL. Então vamos lá, para definir uma rota, a gente vai falar app, ponto verb http, nesse caso get, e vamos chamar como função, dois argumentos, primeiro é o caminho, vai ser barra artigos, segundo é aquela função, vou passar uma função anônima aqui, com dois argumentos, rack, vírgula, res, eu usei o função de chave, que é anônima, vou usar function também, tanto faz, certo? E dentro disso, vou falar essa res, ponto send, e uma string com artigo, só para ver se funciona mesmo. Então vamos fazer outra rota, qual é outra, app, qual é o ver para o barra artigos, barra artigos específicos, ponto get, abre parênteses, primeiro argumenta o caminho, barra artigos, barra, alguma coisa, o artigo slug, na esse caso, essa parte do caminho é dinâmico, essa parte é variável, então, o uso ar para digitar qualquer coisa, nesse caso, você coloca dois pontos antes do nome, nesse caso, esse nome seria o nome da variável que você pode acessar dentro da sua função aqui, vou chamar de artigo slug, não se esqueça dos dois pontos, aí o segundo argumento do get, função anônima, get, res, igual, maior que, abre chave, então, vou fazer o seguinte aqui, vamos colocar res, ponto send, artigo específico, por enquanto, depois vou te ensinar como acessar o valor do artigo slug, que está o valor do caminho lá, e finalmente, você fala app, ponto lesse, e a porta, nesse caso, o front-end que está usando a porta 3.000 já, então já está ocupado, eu vou usar 3.001, pronto, vamos salvar ver se isso funciona antes de a gente continuar, eu vou aqui no terminal, em uma nova aba, se lembra que o cliente está rodando já em uma aba separada, ou janela separada, você vai aqui, e é simplesmente para rodar o aplicativo de express, é só chamar o node espaço o nome do arquivo que é index.js, aí eu esqueci de instalar o express, então vamos instalar npm, espaço install, espaço express, que não vem com node, tem que instalar separado, então npm, espaço install, express, ele vai ser adicionado aqui no package json, as dependências, versão do express que a gente usa nesse vídeo, 4.181, então vamos continuar, fala node, espaço index.js, note que ele não fala nada, mas o servidor está rodando, se você quiser que ele faça alguma coisa, é só adicionar aqui, como segundo argumento de lesse, não funciona anônimo, e você pode usar um console log aqui, servidor, só está rodando, ou disponível em htp, 2.barra, barra, localhost, a 2. eu vou colocar a variável, vou interpolar aqui, com variável porta que eu vou criar antes do app.tuless com a porta igual 3.1, e na linha 15, em vez de falar 3.1 como primeiro argumento do lesse, eu vou falar porta que é a variável que eu acabei de criar, e de qualquer maneira a gente vai ter o valor aqui, tendo a gente modificar a linha 14, vai refletir na linha 15 e linha 16, e com isso você vai matar aqui o servidor, de volta a terminal, control C, para mandar o sinal de interroper, e eu falar node index.js de novo, antes de falar que a mensagem apareceu aqui, mas não precisava fazer isso, é só para ficar melhor e visualizar que o servidor está rodando. Aí é bem legal você clicar aqui, se apertar no meu caso, você apertar control e clicar, ele já abre no navegador, no meu caso não sei qual é o meu, eu tenho vários navegadores, então não sei, vou abrir no crome aqui, então vou copiar e colar, certo? Vou abrir a nova navegador, vou para localhost 2.3.1, cannotget slash, porque a gente não definiu não é uma rota para o raiz, mas eu vou colocar barra artigos aqui, e você vai ver que apareceu com resposta artigo, que é aquela string, que a gente mandou aqui na linha 7 do index.js. Legal, eu gosto de fazer o seguinte, no navegador eu gosto de apertar F12 para abrir o dev tools, que são as ferramentas de desenvolvimento, eu uso Prominem como navegador, mas outros navegadores é bem parecido, quase a mesma coisa, essa mesma, essa mesma mecanismo para as ferramentas. Aí eu gosto de clicar na aba de network, e eu vou da atualizar aqui, você nota que aparece uma nova linha, e eu clico aqui, eu posso analisar essa requisição e a sua resposta, nesse caso aqui ele mostra qual é o REL, qual é o método de HTTP, nesse caso get, e qual está a escolha da resposta, que é o código 0304k. Você nota que ele mostra também os headers da resposta, connexion, date, tag, keep alive, tem também esse xpowered by express que você pode remover, esse aqui revela que o servidor está rodando express. Tem uma configuração que você pode remover, se quiser, lá no documentação do express. Ele mostra também os headers da requisição, accept, tap encoder e tal, e tal, e tal. Tem aqui o haveResponse, que é uma string, e tem o preview. Legal. Então, eu vou te mostrar como fazer o bar artigos, bar qualquer coisa, né? Então, note que responde com um artigo específico, para qualquer coisa, depois de bar artigos, bar. Então, para poder você acessar o valor do artigo slug aqui, na linha de volta editor de torche, na linha 10, você faz o seguinte, você acessa o rack.params.nome da variável, que você especificou no caminho aqui, depois dos dois pontos. Então, aqui eu vou tornar a linha 11 backchick, o grave aqui, para poder interpolar a string, e em vez de falar específico, eu vou falar o slug. Nesse caso, você tem que dizer rack.params.artigo.slug, que é o mesmo nome que você escreveu no caminho aqui, depois dos dois pontos. Isso vai te permitir acessar o valor que foi digitado pelo usuário nesse caminho. Eu vou salvar, de volta ao terminal, eu tenho que apertar Ctrl-C para interromper, vai de parar, matar o servidor, e rodar o node index.tts novamente. Volta ao navegador, atualizar, isso é o nome que apareceu na resposta, o que foi digitado no caminho. Rack.params.nome, da variável. O artigo slug nesse caso. Bem, legal. É outra coisa que, para facilitar o nosso desenvolvimento, a gente não tem que matar o servidor e rodar ele novamente. A gente vai usar o node, então vou matar o servidor, vou falar npm, espaço install, espaço nodemon. Nodemon vai reiniciar o servidor toda vez que modificar o seu código-fonte, para a gente não ter que fazer isso manualmente. Então, com o nodemon instalado, eu gostaria de fazer um negócio aqui também. Em vez de falar onde está, eu quero instalar o nodemon nas dev-dependences. Então vou falar npm install. Antes do nodemon, vou falar save, traço dev. Eu acho que eu dei um install para poder reverter. Antes. Mas eu gostaria de usar o save dev para poder separar o nodemon de dependência de produção e de dependência de desenvolvimento. Você vai ver aqui o que dizer. No package-mont.js.on, da pasta do servidor, apareceu o nodemon na linha 15, mas está dentro da propriedade dev-dependences. São propriedades que, de dependências, são necessárias para desenvolvimento, mas não são precisas na produção. Então eu separei o dev-dependences do dependences. Se eu estivesse usado sem a opção de traço-traço-teve-traço-dev, eu instalei o nodemon aqui em dependences. Vocês são uma coisa para separar a coisa, mas não importa muito. Então tu faz ser ali ou lá, mas eu gosto de separar e desenvolvimento. Então com isso, a gente faz o seguinte. Você pode chamar o nodemon com o nome do arquivo, da mesma maneira que a gente falou, nodespac.index.js, agora a gente fala nodemon.spac.index.js. Agora um detalhe aqui. O nodemon foi instalado no nodemods, essa parte aqui, da parte do servidor. E tem uma parte aqui chamada.bin, que tem um... O que é esse dia executável, o script executável aqui, do nodemon. A parte que a gente não tem que digitar, nodebarra, nodemolus, barra.bin, barra nodemon. A gente pode usar o npx. Então faz o seguinte, você fala npx, faça o nodemon, faça index.js. Npx ele faz ele usar o nodemon, que está instalado no nodemods, do diretório desse projeto, em vez do global. Caso o global eu não tenho. E ainda que tivesse o global, não seria legal porque eu poderia estar usando a versão diferente do software global, e a minha dependência aqui era requerir um ano de versão que era diferente da global. Então por isso que é legal, não é legal você usar o global, eu sempre uso com o npx, certo? Então npx nodemon, index.js. Então está aqui, se eu fizer alguma mudança aqui, você vai ver aqui, deixa eu colocar lá, da lado com terminal. Terminal, lá esquerdo, e o editor de texto do lado direito, pôr o index.js e mudar alguma coisa, sei lá, artigo 2. Salva, você note que o nodemon aqui já fala restarting, e inicia novamente o comando node index.js. E eu posso ir no navegador e ver que o bar artigo agora retorna artigo 2, como eu tinha modificado. Então, bem conveniente reverter o que eu fiz na linha 7. Há um outro detalhe, você pode suar isso ao package.js.on dentro de scripts, você pode falar da mesma, né, que eu tinha o npm run dev para o front-end, se você se lembra, e rodava o next dev. Eu posso colocar esse comando aqui. Nesse caso aqui, é só falar o seguinte, lá na scripts, fala o nome do comando que é dev e vou falar nodemon index.js. Quero se dá vivo. Nesse caso não tem npx, porque quando você faz npm run dev, ele automaticamente vai pegar o nodemon que está dentro de nodemodes deste projeto. Então, não precisa de npmx. Vou fazer isso e toda hora que eu tiver no servidor, fala npm run dev, vai ser a mesma coisa que rodar nodemon index.js. Legal, pessoal? Então, aqui temos o nodemon versão 2.0.19. Então, vamos continuar. Vou de volta aqui, npm index.js. Artigo, artigo. A gente precisa pegar esse dado, né, de algum lugar. E esse em algum lugar, tá, agora está no front-end, tá? Então, vou fazer o seguinte, vou primeiro copiar, depois vou deletar do cliente, tá? E vou colar no servidor. Então, o arquivo artigos.js que estava na parte do cliente, eu copiei para o meu servidor. Depois eu vou apagar do cliente, certo? Agora, o servidor vai ser responsável para carregar esse arquivo e mandar a resposta para o cliente. O cliente agora que vai ter pedido o servidor pelos dados, tá? Então, vamos primeiro fazer a parte da API, depois a gente faz do front-end. O API é bem fácil, você ter um navegador aqui do lado, aí você pode falar no localhost 3001 bar artigos, o navegador possui próprio, quando você digita aqui no endereço, ele faz sempre um get request, né, requisição get. Então, esse aqui vai ser o get localhost 3001 bar artigos, que é aquele negócio. Se você pode usar o network aqui para poder analisar melhor os negócios que você quiser do dev tools. Então, vamos lá, começar aqui no artigos para poder pegar todos os artigos, vamos fazer o seguinte, vamos carregar primeiro os artigos, const artigos igual a require.bar artigos, é que o ponto bar artigos, esse arquivo aqui, chama artigos para o JTS. Vou te mostrar aqui, play out do editor duas linhas, e aqui embaixo eu vou colocar artigos para o JTS, se você se lembra, artigos.js ele exporta, né, um array de objetos, cada objeto é os dados de um post, é um artigo. Legal, então aqui, para a gente pegar e mandar todos os artigos, basta você substituir na linha 8 mandar artigos, só assim mesmo, porque o express já vai entender, você pegou um array de objetos, então eu vou mandar no formato JSON. Então, vamos lá, vou dar uma atualizada, você clica no network, e você vai ver os headers da response headers, que é da resposta, né. Note que o content type já foi ajustado para application, barra, JSON e o care set igual o tf, traço 8, então a gente não precisou, manualmente atribuir application JSON, o header né, content type essa resposta, então isso é legal do express, de fazer automaticamente para a gente, quando ele detectou o que a gente enviou, a gente passou um array como argumento para a função send do objeto de resposta. Então, é só isso para o endpoint de lista nesse caso, né. Tá bom, agora vamos para o caso específico, né, se eu digitar artigo, alguma coisa aqui, nesse caso, a slug, deixa eu copiar aqui embaixo, no painel de baixo, o slug do primeiro, que vou colocar na minha URL aqui no navegador, o loryycdlcdm, o cdm como a gente vai pegar isso? Bem, o code vai ser mesmo do frontend, né, se você se lembra, a gente foi na pasta do cliente web no caminho pages né, artigos artigos slug, na função de get static props, tem essa lógica aqui, do find, artigos.find, a gente vai copiar isso a mesma coisa, certo do backend, então vou lá de volta para o backend na parte do caminho bar, artigos, bar, artigos slug com os dois pontos antes eu vou colar na nova linha 12 aqui, aquela lógica, então vamos, o artigo a gente já tem definido, que é na linha 4 do require da o find, agora que vai mudar o seguinte, o artigo do slug, se foi igual ao que? Não tem context, mas tem o que? rack, então você muda context para rack rack.params, ponto artigo slug, corresponde ao caminho aqui, certo? que é a mesma coisa que a gente tinha antes aqui, se lembra na linha 19 então se você bater com o slug retorno true, isso é esse item, vai ser retornado com um artigo, certo? se não existir, aí a gente faz 404, não encontrar, então vou fazer o seguinte, if exclamação, né, artigo se não existir o artigo nós vamos retornar 404, não encontrar com um objeto de erro, como que faz isso? bem simples rest, ponto stars passa com o marmento core 404, e depois você encadeia com um ponto send, nesse caso você pode send sem nada, ou eu gosto de colocar um objeto aqui com uma propriedade erro, por exemplo não encontrado um detalhe aqui, quando você faz sempre rest, ponto send, tome muito cuidado, porque se você falar isso, o código depois disso, vai ser rodado também, rodado também, então sempre você tem que dar o return, depois de fazer o rest, nesse caso antes não precisava porque era o último comando, né, do bloco da função, então tinha nada depois, mas nesse caso tem algo depois, então você precisa do return não se esqueça, por favor algumas pessoas gostam de dar o return na mesma linha do rest send, então pode fazer assim também return rest stars 404, ponto send, erro não encontrado, então vamos ver aqui beleza então você pode testar o não encontrado, se você quiser colocar a metiboon aqui nos três na rota que não existe se não é de que ele retorna, erro não encontrado com a string, se você clicar na network e analisar aqui 404 para o código e dar o response aqui, o header tem um content type response aplicashtlson, então o preview do navegador vai aparecer como um objeto, né, que a propriedade erro e o valor on string não encontrado, eu coloquei um espaço aqui que não precisa legal, agora vamos retornar o artigo que existe, é bem simples falar rest, ponto send, artigo só isso, deixa eu revolver se um, dois, três do meu navegador então é o sinal que a gente recebeu o artigo aqui específico de novo, na aba de devtools, network, id então você dá o preview aqui 200 ok, legal, status code padrão, 200 ok do express, parece é, não parece, é e a gente precisa falar explicitamente 200 ok com o ponto send, não precisa falar explicitamente, dá o response do one string, formato json se você colocar preview, ele realmente aparece um objeto aqui para visualizar melhor tá bom pessoal, então a gente tem api que serve dados em formato json, muito legal, agora a gente pode configurar com um dado frontend, então o frontend vai fazer o que? vai fazer uma requisição, HTTP para esse backend que é um servidor between nodes que é Java script do lado do servidor com o express que é um framework web para um servidor de HTTP bem leve, flexível aí a gente vai responder qual é a resposta e o o frontend vai se comportar de acordo agora vamos lá no código do frontend, se você vai para o pages, artigos index vamos ver aqui se você se lembra o getStaticProps, na hora de você construir o aplicativo, ele chama essa função getStaticProps, então ele injeta os artigos como props, artigos que vêm do arquivo artigos potejs, então vai injetar isso, na hora de construir o aplicativo e aparecer aqui então esse é o mecanismo, agora a gente poderia usar os tetic props aqui, fazer o fetch para api e poder injetar os artigos, agora o problema é que esse getStaticProps só chama uma vez na hora que constrói faz a build do aplicativo, e aqui era uma fotografia dos dados naquele ponto do tempo então depois daqui os dados certamente serão modificados artigos serão modificados, atualizados artigos serão deletados ou adicionados novos serão adicionados então a gente não pode fazer uma coisa estática para uma coisa que é dinâmica então para isso a gente vai ter que mudar de getStaticProps para getServerSideProps então aconteceu o seguinte, o getServerSizeProps sempre é chamado na requisição do usuário então o cliente que é o next o next.js, você é o navegador na verdade faz a primeira de volta aqui na aba do aplicativo de frontend você vai para o barartigo por exemplo faz a revisão get barartigo para o next.js aqui é o nosso frontend o next.js por si vai chamar o getServerSizeProps naquela requisição e vai retornar a resposta renderIsire e retornar agora na parte de getServerSideProps a gente vai fazer o seguinte a gente vai fazer uma chamada HTTP para API poder obter os artigos e aí a gente vai injetar eles na hora da requisição para antes de responder para o cliente navegador certo então para poder fazer isso você vai ter que ter um maneiro de fazer a xml.http request normalmente no cliente a gente usa o fetch porque é o padrão que já existe claro que tem outros biblioteques externas como axios ou outra aí agora minha preocupação aqui do next.js é que o next.js roda o código no node não é cliente JavaScript então ele pode não ter o fetch disponível então eu teria que instalar uma coisa externa como node.js que usa a mesma API ou axios ou qualquer outra coisa mas ele não é preciso porque o next.js já adiciona o support de a gente chamar o fetch que eu li na documentação eu foquei no meu navegador next.js.org faz uma search para node.js I click a supported browsers and features navegadores e novidades são suportadas na parte de server-side polyfills além de ter o fetch no lado do cliente o next também polyfills adicionar a funcionalidade que não tem no ambiente node.js que é a minha preocupação que ele não teria o fetch mas ele tem graças ao o next.js adicionando uma coisa aqui você pode usar o fetch no código do servidor que é o nosso caso aqui get server-side props dentro dele que é a roda do servidor sem usar a polyfill por exemplo como node.fetch que eu instalaria se não tivesse suporte não é o node.fetch que a gente usa aqui então ele já vai fazer o seguinte você vai falar fetch abre parênteses nesse caso é uma requerição get bem simples você pode botar string para o rl e ele vai ser implicito get então http 2.barra.locorhost 2.315 barratigos agora isso é a tona promessa com um objeto de resposta que é resolvido vou colocar uma variável chamada resposta igual e vou colocar wait porque é uma promessa ou você faz o .then fetch ou como estou usando uma função async eu posso usar o wait aqui eu pego a resposta agora o objeto de resposta tem um corpo e desse corpo a gente pode extrair o corpo e a gente pode também colocar informato.json na mesma hora em um objeto JavaScript parse então você vai falar const artigos igual await resposta.json quando eu falo resposta.json chamada das funções ele vai extrair do corpo e vai interpretar como formato.json e vai colocar num objeto JavaScript nesse caso seria a array falou await obviamente teria erros aqui então você teria que lidar com erros de alguma maneira usando tryg catch por exemplo mas eu não vou deixar como exercício se você quiser fazer então a id return props artigos na mesma maneira e com isso eu não parecia ter o import na linha 3 do artigo e vamos ver se funciona então primeiro de tudo é que o cliente uma aba de xjs e o servidor rodando em outra aba também o aba janela que você preferir eu volto no navegador no cliente 3 mil barartigos bateu, é a mesma coisa sem problemas agora a gente faz a mesma coisa para o artigo slug então vai aqui artigo slug não vai precisar mais do get static path é claro que a gente poderia usar isso aqui mas como a gente tem dados dinâmicos não faria sentido você só ter a fotografia dos dados de um ponto no tempo aí o usuário pediu uma requisição e sempre seria os mesmos artigos não teria nenhum arquivo novo e nenhuma atualização não sei que você sempre teria que fazer um build, um deploy lançar o aplicativo toda hora que tivesse artigo novo e não faz sentido né então vamos lá do get static props vai se tornar get server side props agora vamos fazer o fetch aqui vou deixar esse código aqui vou tirar já já, tá? a fetch string.htp barra barra louco rosto 2.3.1 barra, artigos, agora uma coisa diferente tem que ter o slug então vou tornar isso aqui um back tick string de back tick, grave e vou fazer a interpelação do slug mas o slug vem da onde? context.params ponto artigo slug que é do next.js né vou recortar isso, vou colocar aqui agora a gente fala await coloca na resposta com a resposta igual e disso a gente vai extrair resposta json 40 com a variável que eu chamar artigo igual dessa maneira aqui, claro que vai ter 404, então ele dá com 404 vamos ver já já vamos deixar como todo fazer né aí você retorna aqui artigo, próprios artigos beleza, agora na linha 4 remover import do artigos volta o navegador note que tudo está sendo automatizado o reiniciar do cliente e tal agora clique em um opa o que aconteceu eu dei o ferro esqueci do await linha 41 resposta para json esse que retorna a promessa vou usar o ponto den para poder pegar o valor resolvido ou falar await esqueci do await na linha 41 vamos de novo tentar novamente, aí funcionou ela pegou realmente o primeiro se eu tentasse o outro iria funcionar também cada as diferentes legal vou voltar aqui então é isso agora para 404 você digitar qualquer coisa tá ruim né então para o 404 você pode fazer o o returner que se não existe o returner o returner aqui se não existe o artigo vamos ver aqui se não exclamação artigo você pode dar o return object not found 2.true acho que assim funciona vamos ver artigo slugging deixa eu olhar na documentação se eu errei do next.js not found lembra que é not found do get server side dessa maneira que se eu ver que não funcionou que não existe artigo o que que tá acontecendo vamos aqui no next.js ah entendi nesse caso que a resposta é o erro por isso minha api retorna a uma coisa que é o erro não encontrado a gente pode olhar nos status se quiser eu ver aqui se eu fizer try patch has posted try has posted catch error eu não sei se vai colocar um erro se der 404 vamos ver console.io eu vou ver aqui botou navegador olhar o que foi artigo erro não encontrado patch aqui resposta ok não teve erro não bateu na lind 44 então ele não faz o erro e o erro foi 4.q resposta ok em lind 44 então ele não joga um erro se não tiver 404 se tiver 404 então ele bateu aqui o 8.js o erro nesse caso artigo que tá sendo o erro ok então tá errado né como a gente poder melhora isso acho que resposta.ok ok seria uma maneira de identificar o erro deixa eu rever ter tudo tá depois de debugar aqui eu acho que resposta.ok né deixa eu ver aqui console.org resposta.ok faos ok a gente pode usar esse resposta.ok que não é nos 200 fódigo então resposta da alphat e resposta não foi o acá teve algum erro certo nesse caso api retorna um erro aqui não foi contrado você poderia colocar o return não found true aqui tá é correto isso poderia ter um erro de 500 por exemplo mas não significaria que não foi contrado mas você pode lidar com exercício mas eu vou colocar não encontrar aqui acho que a resposta também você pode você pode pegar o status para ver se é 404 não sei o que você que vê aí eu deixar assim mesmo bem simples vamos lá agora d404 não encontrado certo se eu der algum resposta não foi o acá ele retorna não found true que o next.js vai interpretar com a 404 pares que eu vou mandar se tudo é certo a resposta for ao cá vai continuar vai extrair o j informado json nesse caso vai converter para um array colocar na variável artigo e você vai injetar como props então se a gente voltar aqui que existir realmente funciona certo pessoal e então vamos revolver o import já tinha removido agora vamos dar o arquivo artigos.js da parte do cliente web não precisa mais agora está no servidor tá bom então vamos aqui revisar isso aqui então essa aula foi mais para o back end a gente fez uma nova pasta que é separada do cliente web para o servidor criamos arquivo pack.js com o json para fazer um projeto de node instalamos o express instalamos o nodemon para facilitar o desenvolvimento criamos o comando nodemon index para o js que é o npm run dev para o servidor criamos arquivo index para o js que é um aplicativo de express servidor http require express chamer express, colocar na variável app define os rotas app get barra artigos app get barra artigos barra do response artigo slug sempre tem como segundo argumento do negócio de definir uma rota essa função que tem rec para requisição e res para resposta request, response para poder enviar um resposta bem simples brass.send artigos certo? a mesma coisa para o outro para poder ter uma parte do caminho dinâmico só colocar dois pontos seguido do nome da variável que você quer que apareça em rec.params então para acessar esse valor do artigo slug aqui seria rec.params.artigo slug para poder enviar um resposta com o código de estado diferente só falar response status e o número, nesse caso 404 aqui na lia 20 e você pode ir acorrentar com ponto send ou pode fazer separado colocar na variável separado respond status e depois no nova linha respond send tudo faz não se esqueça de colocar return sempre que dá o send se não ele pode rodar o código depois e dá problema fazer algum efeito colateral e finalmente para a app.less com a porta se quiser fazer uma string para você ver a visualização que você viu está rodando é só colocar uma função aqui anônima para o segundo argumento do lesson e depois de configurar o frontend para usar o fetch de volta na parte do frontend no index em vez de get static props a gente usa get server side props que é sempre chamado em cada requisição o navegador faz o pedido para o nextjs o nextjs roda o get server side props e antes de mandar a resposta e nesse caso a gente faz um outro pedido que é uma requisição para a api que serve formato json a gente pega a resposta que os artigos extrai e injeta como props e ele renderiza o html ou qualquer coisa o mecanismo do nextjs como é que ele manda de volta para o cliente e aparece lá tá? mesma coisa para o artigo slug o .js o .js você tem aqui muda para o get server side props não precisa mais do static o paths aquele negócio de static paths quando você digita qualquer coisa aqui você qualquer coisa ele vai lá manda a requisição para o nextjs o nextjs se chama get server side props get server side props faz uma requisição para api se a resposta não for ok você retorna com not found true para retorna a 404 página a página 404 a s2d7 ele vai continuar a odar o código e vai pegar extrair o artigo da resposta do corpo da resposta em formato json de formato json e injeta como prop o s2d7 tá certo pessoal eu quero remover com o s2d7 e da linha s7 para o rq acho que é diante mostrar como usar ok pessoal então por essa é só e até a próxima espero que você gostar dessa aula não se esqueça de curtir esse vídeo deixar comentário pessoal aí cadê cimento alguma dúvida tentar responder você quiser também pode clicar naquele sininho para obter para receber as notificações de novas aulas certo então muito obrigado por tudo e até a próxima tchau