Bem-vindo a mais uma aula do nosso projeto de criar um portal de notícias com o Next.js e outras tecnologias. Vamos continuar. Estou com o servidor de desenvolvimento do aplicativo front-end rodando aqui. Meu navegador no lado esquerdo. A mostrando o mensagem de eu que também aparece no terminal. Dizendo que a propriedade href in breadcrumb section conflita com propriedade link. Então tem que escolher uma das duas. Então eu vou lá para o artigos-index.js nesse arquivo. Deixa eu agitar a indentação aqui. Breadcrumb.section linha 8. Como já tem href, vou tirar link para ver se conserta esse problema. A mensagem não apareceu no navegador e nem no terminal. Vamos ver um artigo específico a mesma. O mesmo problema aconteceu. Agora eu vou no arquivo artigos-artigo-slug. A linha 12. Em vez de link eu vou remover link que já tem href. Vamos ver se tem outro. A mensagem se foi. E só isso para consertar. Voltando aqui ao design eu adicionei o requerimento. Aqui em cima a barra redireciona para barra artigos. Isto é, eu for no navegador na página principal que é o barra. Eu quero que na verdade redirecione para barra artigos automaticamente. Eu vou te ensinar como fazer isso através do redirects do next.js. Quero notar que em vários locais onde você pode redirect seja na hora de construção, build time, seja na hora que o programa já foi lançado e está rodando que é o runtime. Eu vou fazer para build time. Isto é, você já sabe antes da compilação na hora da construção, já sabe que esse redirecionamento vai ocorrer. E esse redirecionamento vai ser temporário até a gente. Nesse caso a gente não tem a página principal, mas no futuro teria uma página principal, por isso que não vai ser permanente. Então vamos lá. De volta o editor de texto, com a minha aba, a minha barra lateral agora mostra, eu vou criar um arquivo na pasta-raiz do projeto. Esse arquivo eu vou lhe dar o nome de next.conf.js. Esse arquivo é usado para configurações do next, normalmente configurações já do build time, no tempo de construção. Nesse arquivo eu vou exportar um objeto. Então vou falar module.exports igual a brichaves.vivo. E aqui nós podemos definir certas configurações variadas do next.js. Nesse caso a configuração seria de redirects e é redirecionamentos. Então rd, rc, ts vai ser o nome da função. Mas a função pode ser async, assíncrona, então coloco a palavra chave antes, abre os parânteses depois a palavra redirects, abre os chaves, a minha virgula que está dentro de um objeto. Dessa função eu vou retornar um array, então abre os cuchetes. E o item dessa array é um objeto que tem três propriedades. Primeiro, da onde que você quer redirecionar, para onde que você quer redirecionar, e se é permanente ou não. Então source vai ser o da onde você quer redirecionar, redirecionar do barra e o destino destination vai ser barra artigos. E permanente vai ser falso que eu não quero que esteja permanente. Ok, agora quando você modifica alguma coisa nesse arquivo, no x.cofego.js, tem que matar o servidor e rodar novamente o run dev. Vamos lá tentar ir para o barra e eu coloquei o nex.cofego.js no lugar errado. Tem que ser no pasta-raiz, não é no artigos. Então vou mover para pasta-raiz, vamos tentar novamente. O personagem que ele já detectou que houve uma mudança no arquivo. Nex.cofego.js está pedindo para reiniciar o servidor, então vamos reiniciar. E eu cometi um erro de sintaxi, parece. Linha 10 nex.cofego.js. Ok, objeto. Não tem vígula no return. Ok, ponto vígula. Rodando. Vou tentar ir para o barra e fui redirecionado para o barra artigos automaticamente. Vou tentar ir através da transição do lado do cliente pelo link. Pelo link ele deu, então tem esse detalhe. Encontramos um bug no nosso redirecionamento. E agora como resolver isso? Bem, podemos consertar isso através de um redirect de runtime na hora que já foi lançado e está rodando. Então vamos lá na página do inicial que é a raiz. Nesse caso já existe, o que aconteceria se não existisse? Poderíamos tentar ver isso, renomear para index, alguma coisa que acontece. Vou ver aqui. Então nesse caso aquilo aconteceu. Então redirecionou se a página não existir, parece. Então o link funciona corretamente para redirecionar se a página, o arquivo não existe, mas se existir como eu já tinha antes, vai dar aquele bug. Só aproveitar com esse bug aqui para te assinar como redirecionar se já existia que você quiser manter e depois como espécie de manter essa página privada até que você queira publicar. Então essa vai ser o redirect do runtime. Então vamos lá. Nesse caso você pode fazer o seguinte, redirect estático, o server-side, vou ver aqui. Vamos aqui na documentação docs. Vamos ver o redirect. Vamos ver static props. Então a gente pode usar o static props. Então há várias maneiras de, como é que eu falo? Então a gente sabe que tem renderização quando o aplicativo na forma escrita o direct se torna HTML puro. Esse processo de renderização pode ser feito no servidor ou no cliente. A single page application de página única, a SPA, por padrão ela faria tudo no lado do cliente, renderização no cliente. O cliente receberia o arquivo HTML sem nada e desse arquivo o cliente usaria o arquivo JavaScript para poder construir a estrutura todo no lado do cliente. O sucessamento era a maior parte do cliente. No caso tradicional de server-side, que é o lado do servidor, o servidor gera a página inteira processada no servidor e somando HTML puro já renderizado para o cliente. Agora no nosso caso hibrido do Next.js, na primeira vez ele manda já renderizado e na próxima é na parte do cliente para processar. Agora, essa parte do servidor do Next.js, ele ou pode em cada requisição gerar tudo no runtime da requisição ou pode já pré-rendereizar tudo já na hora da compilação no build time. Então, se você já tem os dados e souber tudo antes de precisar rodar o programa, você pode já fazer o pre-rendering estático. Mas se você precisar, se tiver algo dinâmico que só pode poder determinar na hora da requisição, então você usa o renderização do server-side. E isso vai determinar que tipo de função do Next.js você vai usar. Se você tiver conteúdo estático que já vai saber qual vai ser o conteúdo, até antes de qualquer requisição, usa o getStaticProps, essa função aqui. Se você não souber e depender de uma certa variável do usuário da requisição do usuário, você usa o getServerSideProps. Ok? Nesse caso eu já sei que eu quero redirecionar sem nenhuma variável lá na parte do usuário. Então eu vou usar o getStaticProps. Então aqui na página index, pages-index, exportAceInCfunction, getStaticProps, propriedades estáticas, argumento context se você quiser usar. E nesse caso eu vou dar um return para redirecionar. Se olhar na documentação e buscar o redirect, mostra que o getStaticProps deve retornar objeto que contém umas das seguintes propriedades props, redirect ou not found que não encontrado. Nesse caso eu quero redirect. Vamos ver a documentação do redirect. Do redirect você passa um objeto aqui com o destino e permanente ou não. Para ir parecido com a configuração do Next.js config, é certo que não tem o source. Então vamos voltar lá o arquivo e dizer redirect com a propriedade. Esse objeto é tornado e redirect é um valor. Objet destination vai ser barra artigos e não vai ser permanente. Burned false. Vamos voltar aqui. Vamos primeiro fazer o bar que redireciona através da configuração do Next.js. Agora vou clicar no link e note que ele já redireciona se clicar no link do breadcrumb. Redireciona para barra artigos e vez de ir para aquela página que exigia. Se a gente não tiver isso, claro que vai bater na página inicial. Está errado. Então se você quiser olhar... Esse foi redirect. Vamos usar esse getStaticProps que a gente aprendeu. Só como exercício para poder já começar a mover os dados falsos do cliente já para abstrair em outro local mais perto do back-end. É claro que não vai ser back-end ainda. Então vamos aqui para a página index dos artigos. E olha que a gente tem da linha 12 até a linha 38, esses artigos falsos. Eu gostaria de tornar essa sessão dinâmica e receber esses artigos através de props. Então seria o seguinte... Aqui em vez disso seria, por exemplo, props.artigos.map.artigo. Seria um array de vários objetos e cada objeto tem informações do artigo. Nesse caso seria o título. E eu daria o map para poder retornar um cartão gerado dinamicamente. Então return, abre parênteses, eu vou recortar a linha 17a25 e colocar dentro desse valor de return. E aqui na hora do texto do link vai ser o artigo.title, entre chaves para poder substituir o valor dessa variável. E com isso eu vou recortar a linha, eu vou tirar a linha 16, 26 até 43. Mas como injetar esses props aqui, eu vou usar o getStaticProps. Export, async, function, getStaticProps, context, eu sei que não uso context mais ainda. Então dessa função eu vou retornar as propriedades para serem injetadas no artigo index. Então return, objeto, palavra-chave aqui é props, passo um objeto e nesse objeto eu vou falar artigos. E vou colocar um array de objetos, cada objeto tem um título que eu vou colar que ele valorar. Para tornar isso mais real eu vou colocar valores diferentes. Então deixa eu colocar e duplicar três vezes que é o que a gente tinha, uma, duas. E eu vou tirar essas palavras para ficar um pouco mais variada. Pronto, return props, agora tem que definir aqui no artigo index, declarar o props como parâmetro da função. Que mais deu errado. Ah, tinha que reiniciar o navegador. Está reclamando aqui que não tem um aqui, quando você faz um map, normalmente tem que adicionar um aqui para o componente. Então vou colocar um aqui, sei lá artigo, um único, vamos colocar um id, deixa eu adicionar um id a cada objeto aqui. Id, vou colocar um inteiro, tá? Um, dois, três. É iniciar o navegador. Então note que apareceu um cartão para cada objeto dessa array artigos. E foi criado dinamicamente que nos leva mais essa, esse código a refletir mais o que seria no mundo real, na produção, né? Quando a gente, os dados viriam do banco de dados, mas ainda não vem mais parecido na parte do componente, do valor de retorno em JSSX. Então legal, deixa eu, vamos falar mais do static props. Então o static props, né? Esse cara aqui não vai ser chamado pelo cliente, no código do cliente, tá? Só vai ser chamado essa função, só vai ser chamada no servidor na hora que você roda o comando de build do next.js. Nesse caso, como a gente está falando o NPM, usando o NPM run dev, que na verdade, next dev, o next dev faz o build e roda o servidor de desenvolvimento. Toda vez que ele roda o build, né? Ele vai chamar essa função para construir esse componente e pré-renderizar isto é, gerar arquivo de HTML com esse conteúdo aqui já embutido e o conteúdo já gerado isto é, ele vai chamar essa função, ele vai pegar e esse valor de retorno e já está esses props no artigo index. Esses props vão aparecer aqui, vão gerar com essa operação map, vão gerar esses três retângulos, né? Esses três caixas, cartões e o conteúdo todo, o HTML será gerado e esse HTML gerado vai ser salvo em um arquivo HTML que vai ser enviado já ao cliente, já preparado, tá? Que é o diferente do outro que a gente vai ver depois, que é o get server-side props, que é sempre chamado em qualquer requisição, mais na parte do servidor. Cada requisição chama get server-side props. Então podemos fazer a mesma coisa para o artigo slug aqui que vai ser mais interessante. Ah, aqui tal você fazer isso? Como exercício aí? Tente fazer a mesma coisa para a página específica do artigo. Então pessoal, espero que você tenha pausado o vídeo para fazer o exercício e vou te mostrar uma maneira de fazer isso. E eu gostaria até de mover os dados para um arquivo só para a gente poder referenciar o mesmo conteúdo. Então vamos ver aqui, no arquivo artigo, artigos bar artigos slug com os coxetes, na parte do título do artigo, né? Ah, o que eu vou fazer? Vou colocar o seguinte, pegar esse título e vou... Eu espero que o título venha do props.artigo.title, tá bom? Ah, não é startup props, tá errado, meu editor de texto que vai adicionar isso aqui. Não era o que eu queria. props.artigo.title Muito bem, agora o conteúdo seria do props.artigo.sele, vamos falar conteúdo mesmo. Ah, deixa eu comentar isso para não perder, eu perdi o valor do outro ali. Deixa eu copiar de novo aqui. Ah, na verdade não preciso copiar aqui, vai ter, de qualquer maneira. props.artigo.title.prp.conteuda, eu comentei essa parte aqui e não vai aparecer, tá? Quando você penha chaves, barra, asterisco e no final asterisco barra, chave, só para comentar para não perder o valor, porque eu depois vou recortar e usar. Vamos falar aqui o get. Ah, deixa eu ver se coloquei props na linha 5, tem que colocar props aqui com o parâmetro, artigo show. Ok, vamos falar lá fora da função, outra função, export, async, function, get, static, props, context, parâmetro, return, props, dois pontos, chave, artigo, dois pontos. Nesses casos vai ser um objeto único que tem um título e tem o conteúdo. Agora o título será aquele, eu colei aqui. Conteudo seria isso aqui, mas está meio, está usando tag de pelo, isso não vai dar muito certo. Vamos ver aqui. Vai ter problema aqui. Certo o que é o que fazer? Para eu te mostrar isso. Há várias maneiras de representar o conteúdo, você poderia representar nas tags mesmo. Eu acho que o CMS, um WordPress faz isso, ou você pode usar um formato diferente como markdown. E eu gostaria de seguir a rota do markdown para isso. Então para isso eu vou ter que modificar umas coisas. Pe, deixa eu colocar o back tick aqui. Só por enquanto. Então por enquanto eu vou colocar o back tick, que é o, como é que vai falar isso, agudo ou grave? Esse aqui, que é acento grave. O back tick é para colocar uma string de múltiplas linhas aqui. Deixa assim mesmo, depois a gente volta lá para o negócio do markdown para decidir um formato. Vamos resolver essa parte de undefined, o vídeo em título. O que está havendo aqui? Props, ponto artigo, ponto título. Deixa eu dar o console do props. Será que aquilo que eu fiz não deu certo? GetStaticPathsRequired, missing. C, ACV. Então realmente eu acho que o não... Vou colocar qualquer coisa aqui. GetStaticPaths. Ok, eu acho que porque é um negócio dinâmico. Vamos ver aqui, na documentação. GetStaticPathsRequired, no mkssd. Se você ver o texto e pesquisar esse GetStaticPaths, na documentação. Se a página tem rotas dinâmicas e usa GetStaticPaths que a gente fez. Precisa definir uma lista de paths para ver... Ah, entendi. GetStaticPathsRequired. Ok, GetStaticPaths. Acho que porque isso acontece, porque... Não se sabe... Ele tem que saber quais os caminhos que existem para poder pré-renalizar. Você vai criar o HTML já na hora de build. Então como tem um parâmetro dinâmico no caminho, que é o artigo slug? Ele precisa saber... Se a gente souber que tem três artigos, a gente pode definir cada caminho. E ele vai fazer um na direita para poder gerar aquelas páginas, aquelas três páginas. Mas nesse caso, ele não sabe, então a gente precisa dizer. Ou faz isso ou você faz mesmo GetServerSideProps já na hora? E você? Deixa eu ver aqui... Prevendo todos os paths para ver o GetStaticPaths. ReturnPaths. GetStaticPI. Vamos clicar aqui para ver qual é o valor. Ok, vamos ver aqui. GetStaticPaths. ReturnPaths. Array primeiro vai ser o parâmetro, vai ser o artigo slug. Vamos copiar esse aqui. Deixa eu já escrever aqui, porque eu quero mover para o outro arquivo, mas... Já vou mostrar como melhorar isso. Deixa eu colocar o slug aqui, eu sei que está naquele diferente. Vou pegar a mesma coisa aqui e colocar tudo em letra minúscula separado de um traço. Mas eu vou cortar... vou deixar uns quatro... Não sei, uns cinco palavras, sei lá. Deixar uns cinco palavras, fazer a mesma coisa para os outros. Y, Dolors, Ymer, Sack, Petor. Dolors, Ymer, Sack, Petor, Adipsing. Ok, agora vou copiar esse primeiro aqui. De volta o artigo slug, seria esse. O primeiro e o outro seria um para cada artigo, tá? Vou copiar esse. E o outro aqui. Vamos ver se funciona isso. O link está errado também, por isso que não vai dar certo. Deixa eu consertar o link de cada artigo aqui. Vamos voltar a artigos index, artigos index. Na parte do link que está constante, a gente tem que modificar. Então vou colocar chaves, em vez de asperdúplas vai ser o back tick e outro back tick. E no slug, vou dar uma interpolação e vou dizer artigo.slug, que a gente definiu aqui para cada um. Com isso o link vai apontar para esses paths aqui que nós definimos em getStrikePaths. Ok, vamos no primeiro. Ok, mais um erro. Erro, fallback, chave de fallback tem que ser retornada de getStrikePaths. Ok, então eu esqueci de definir. Documentação também requere para o getStrikePaths. Aqui eu tenho o fallback, caso não batam em nenhum desses que a gente definiu. Vamos ver o fallback, falls, fallback, falls. Qualquer path não retornada por static path vai retornar 404. Isso o que a gente quer nesse caso. falsa, desculpa. Então se for falsa qualquer caminho que não bata com essa lista vai ser 404. Tenta novamente. Pronto, se a gente colocar algo errado na caminho que não exista, né? Desculpa, deu 404. Tá bom? Essa página não pode ser encontrada. Pronto, vamos voltar inicial, vai bater no artigo, é direcionado, né? Clica aqui. Esse funcionou, o segundo também funcionou, o terceiro também funcionou, legal. Ok. Vamos melhorar esse negócio que para não ter que digitar a mesma coisa no lugar de Static Paths? Então vamos fazer o seguinte, só de exercício mesmo, para te mostrar, poder criar um arquivo aqui, chamado artigos.js. E nesse arquivo, vou dar module.exports igual a um array. Esse array será os artigos lá de artigos index, vou pegar todos esses e eu vou recortar e vou colar num artigo.js. Pronto, agora vai estar tudo nesse arquivo, é como se fosse um arquivo de um banco de dados, certo? Vamos imaginar que é o banco de dados. De volta aqui a esse caso aqui, então esse caso, artigos que a gente vai importar, eu vou lá em cima e vou dizer import artigos from.artigo.barra. Opa, tá certo isso? Ponto, ponto, ponto, tá certo, que é o arquivo.js. Vamos ver. Não deu sorte parece. Tá na pasta errada, mais um erro de pasta. De volta pasta raiz, aí deu certo. Pasta raiz e gaseira do mundo TechClanet Web, que está meu editor de testa aberto numa pasta acima dessa pasta do projeto, por isso que aconteceu isso. Pronto, a peste abriu direito, agora faço a mesma coisa por artigos slug, arquivo slug.js. Vamos fazer aqui no getStaticPaths, nessa parte de paths, eu vou fazer o seguinte, eu vou pegar aquele, se lembra, artigos e vou usar meu editor de testa para importar, artigos from.barra.barra.artigos. Ponto, ponto, seguinte, porque é um diretor acima do diretório presente desse arquivo que está aberto, nesse caso artigos slug, né? Ponto, ponto, seria o pages e ponto, ponto, seria o roots, que é o Gazeta Mundutech, cliente web. Pronto, então seria artigos.map.artigo e de cada um eu retornaria um objeto criado dinamicamente com propriedade parâmetros, que o valor ao objeto ter propriedade artigos slug, que é o artigo.slug, dessa maneira eu criei essas coisas dinamicamente, sem eu ter que digitar um por um. Vamos salvar, no navegador, vamos ver se funciona, não houve nenhum erro, está linkando corretamente e qualquer um que não existe dá o 404. De volta, legal, vamos fazer a mesma coisa para o getStaticProps, no getStaticProps vou fazer o seguinte, aqui eu vou, vamos ver, então vou pegar artigos.find.artigo, se eu até mover isso para cima, antes do return para melhorar, então vou tentar achar o artigo, artigos.find.artigo, não esqueço 40, e vou falar, se, ok, então agora que a gente vai usar a variável, no getStaticProps, artigos slug que vem do caminho dessa rota, se lembra daquilo que estava dentro do router query artigos slug, é certo que agora a gente não tem acesso as props, porque ainda não tem as props, né, injetadas, não está no componente, então aqui nesse caso você teria que usar o context, então antes de fazer isso aqui, deixa eu te dar um console log do context para te mostrar o que é, no terminal, pronto, então eu re-dei um refresh aqui no navegador e dou uma olhada no terminal aqui, o meu console log do context é esse aqui que eu estou marcando, o context tem uma propriedade chamada params, que tem todos os parâmetros da rota, nesse caso artigos slug, a gente vai pegar o valor do artigo slug para poder encontrar naquela array de slugs, então vamos lá, aqui no artigo, se o artigo.slug foi igual ao context.params.artigo slug, significa que a gente encontrou, então eu vou retornar true que encontrou, se não retorno false, não é isso, deixa eu dar um console log do artigo para você ver aqui, artigo, ver se funciona, vou tirar um, dois, três, igual um, dois, três, para diferenciar no, pronto, então artigo um, dois, três, foi encontrado com id três, título e bateu nele corretamente, você note que o parâmetro aqui, o artigo slug, é o mesmo que foi achado, então legal, se não tivesse encontrado, vamos ver aqui, ele já bateria no 404, nem chamaria um get static props nesse caso, então a gente pode fazer, a gente já pode supor que por causa do next.es que não vai chamar get static props, se não tiver nenhum caminho que bata nos definidos nos static paths, que sempre vai encontrar o artigo, se não tivesse isso, a gente teria que lidar com um artigo não encontrado, né, indefinido, nesse caso a gente retornaria um not found, assim, algo assim, eu acho que é assim, deixa eu ver na documentação, not found, pronto, assim, seria return not found true, mas o next.es já faz isso pra gente, então não precisa, pronto, vou remover o console log, tá, tá aqui esses consoles, tchau, deixa eu ver ainda aí, aqui, na parte do artigo, esse é o artigo que foi encontrado, então vou remover essa parte aqui, a gente tem que pegar o conteúdo e definir lá naquele arquivo de artigos, mas, qualquer maneira, vai ser a variável aqui que eu peguei, então, o artigo, vai ser o artigo que você pode, é a mesma coisa que digitar só o artigo, tá bom, dessa maneira aqui, agora não vai ter nada pro conteúdo, né, só o título, mas sem conteúdo, então vamos no arquivo artigos.js da pasta-raiz e vou adicionar um conteúdo aqui, conteúdo, qualquer coisa, aperta, apareceu aqui, então se quiser copiar aquele negócio do peso, eu não sei se vai funcionar, vamos ver, é cortar, deletei do arquivo, aqui o artigo log, voltando para o artigo.js, conteúdo do primeiro, colar aqui, acho que eu peguei a iniciar o servidor, será que o artigo.js foi carregado com outro valor? Pronto, então legal, esse aí deu certo, os outros pode pôr qualquer conteúdo, mas note que as tags de P apareceram literalmente, né, isso porque se você, ele não permite você por padrão ter converter as tags para o HTML mesmo, isso é para proteção de XSS, né, de problema de segurança, de cross-site script, né, se não você poderia colocar uma tag de script, é claro que não tem, até agora, não tem jeito de um usuário digitar qualquer coisa e colocar uma tag de script, mas no futuro se despa por uma entrada, digitar alguma tag de script, e esse comportamento aqui não existe, o script poderia ser rodado e algum comportamento malicioso poderia ocorrer, então por isso que tem isso, então por isso que eu falei anteriormente, talvez a gente pode usar markdown, isso que eu gostaria de fazer, eu sei que isso é possível você usar as tags de P, você pode fazer uma lista de, para permitir somente certas tags como P, né, você poderia fazer isso, mas se quiser fazer isso, eu deixo como exercício, eu vou seguir o caminho de usar markdown, tá? Então acho que por isso é só, vamos revisar o que a gente fez aqui, eu vou dar um getdiff para a gente ver, então nessa aula aqui nós consertamos o breadcrum, que estava tendo uma mensagem de erros, só remover o link, a propriedade, porque já tinha um hrf, aprendemos sobre o get static props, para poder injetar props no componente, mas o get static props é para conteúdo estático, que você já sabe que vai existir na hora da construção, na copilação, né? Então com isso a gente pode fazer o conteúdo dos artigos, dinamicamente, sem ter que escrever na marra mesmo, então fica mais parecido com o aplicativo real, que vai pegar do banco de dados, a gente usou o props artigo map, para poder gerar cartões com o informação de um artigo que vem das propres, que são injetadas, criamos um arquivo de artigos, deixa eu adicionar aqui, get add, artigo, cots, dar um getdiff, esse arquivo aqui, que eu vou para, imagina que é um banco de dados, né? Então aprendemos também que se você usar o get static props com uma página, um arquivo que tem a rota dinâmica, né? Isso é nesse caso o artigo slug, né? No coxete, no nome do arquivo, você tem que definir o get static path, para poder definir os caminhos que existem, né? Para serem gerados, pré-redenrenizados na hora da construção do aplicativo. Nesses casos a gente fez um mapeamento dinâmico de todos os arquivos, para construir um array que retorna o objeto, uma propriedade para ambos, que tem um artigo slug definido pelo slug de cada artigo. Com isso, o next.js vai saber que ele tem que gerar a página, barra artigos, barra tal, barra artigos, barra outra coisa e assim por diante. Então nesse caso só tinha três rotas que existem, né? Com isso o next.js, quando ele observar que você passa um argumento dinâmico, não bate com essa lista dessas rotas aqui, ele retorna 404 não encontrado, not found. Se ele bater e ele vai rodar o get static props na hora da compilação no build time do aplicativo e vai encontrar o artigo aqui e vai retornar a prop, injetar artigo como props para artigos show. Ative o segmento definindo fallback, não se esqueça disso para ele poder fazer esse comportamento do 404, se não encontrar dessa lista de paths. Tá bom então por essa só, muito obrigado por assistir, espero que você tenha aprendido alguma coisa, deixe o seu like, deixe algum comentário, agradecimento, seja de dúvida ou alguma coisa. Por favor se inscreva no nbk mundutec, ajuda muito e se quiser receber notificações por favor clique no sininho para saber quando a próxima aula será lançada. Com isso até a próxima aula, valeu!