Algumas funcionalidades do Next.js<\/strong>: renderiza\u00e7\u00e3o est\u00e1tica e pelo lado do servidor. Possui suporte ao Typescript e um servi\u00e7o de tratamento de rotas muito interessante, que vamos detalhar mais durante esse texto.<\/p>\r\n\r\n\r\n\r\n Muitas funcionalidades s\u00e3o mais percept\u00edveis com a nossa aplica\u00e7\u00e3o em produ\u00e7\u00e3o, pois o Next possui dois pontos principais em seu objetivo: tornar nossa aplica\u00e7\u00e3o React mais perform\u00e1tica e a quest\u00e3o da indexa\u00e7\u00e3o do conte\u00fado da p\u00e1gina pelos motores de busca<\/strong>.<\/p>\r\n\r\n\r\n\r\n Sobre esse ponto da indexa\u00e7\u00e3o, quando desenvolvemos nossas aplica\u00e7\u00f5es da maneira tradicional com React, toda nossa interface e toda chamada \u00e0 API se faz pelo lado do cliente (browser).<\/p>\r\n\r\n\r\n\r\n Ent\u00e3o, quando algum motor de busca ou crawler tentar indexar uma p\u00e1gina feita em React, geralmente n\u00e3o vai esperar que nossa aplica\u00e7\u00e3o fa\u00e7a o carregamento do Javascript, chamadas \u00e0 API e toda a constru\u00e7\u00e3o da p\u00e1gina.<\/p>\r\n\r\n\r\n\r\n Ou seja, essa busca retorna vazia<\/strong> ou sem as informa\u00e7\u00f5es mais relevantes para que nossa aplica\u00e7\u00e3o consiga ser indexada.<\/p>\r\n\r\n\r\n\r\n Onde o Next.js se encaixa nesse cen\u00e1rio? Para gerar toda a p\u00e1gina para o browser, o Next utiliza um servidor Node.js. Usa-se Node.js nesse cen\u00e1rio apenas por entender Javascript nativamente.<\/p>\r\n\r\n\r\n\r\n Dessa forma, o Next consegue entregar a p\u00e1gina pronta para o Browser, ou seja, todo o HTML, CSS e Javascript. Esse comportamento chama-se Server-Side-Rendering<\/strong>.<\/p>\r\n\r\n\r\n\r\n Com essa funcionalidade, a p\u00e1gina \u00e9 retornada para o usu\u00e1rio toda montada. Pensando que esse usu\u00e1rio seja um motor de busca, todo o conte\u00fado da p\u00e1gina retorna, dispondo conte\u00fado para ser indexado.<\/p>\r\n\r\n\r\n\r\n Antes de mais nada, \u00e9 importante entender que gerar um projeto com Next.js \u00e9 bem parecido com a cria\u00e7\u00e3o de um projeto React, por\u00e9m, o comando para criar seu projeto ser\u00e1:<\/p>\r\n\r\n\r\n\r\n Ser voc\u00ea estiver utilizando o yarn:<\/p>\r\n\r\n\r\n\r\n Se voc\u00ea estiver utilizando o npm:<\/p>\r\n\r\n\r\n\r\n Ap\u00f3s criar seu projeto, assim como no React, voc\u00ea ver\u00e1 algo como um boilerplate<\/em>, com algumas pastas e arquivos.<\/p>\r\n\r\n\r\n\r\n Para integrar o Typescript em seus projetos, basta instalar os pacotes, como abaixo:<\/p>\r\n\r\n\r\n\r\n Utilizando o yarn:<\/p>\r\n\r\n\r\n\r\n Utilizando o npm:<\/p>\r\n\r\n\r\n\r\n Ap\u00f3s a instala\u00e7\u00e3o desses pacotes, basta alterar os arquivos para ts ou tsx. Juntamente com isso, para fazer sua aplica\u00e7\u00e3o rodar, basta executar o comando yarn dev<\/em> ou npm run dev<\/em>, dependendo do gerenciador de pacotes que voc\u00ea esteja utilizando.<\/p>\r\n\r\n\r\n\r\n O arquivo tsconfig.json<\/em> ser\u00e1 gerado automaticamente com todas as configura\u00e7\u00f5es necess\u00e1rias para utiliza\u00e7\u00e3o do Typescript.<\/p>\r\n\r\n\r\n\r\n A figura 2 mostra a estrutura de pastas ao iniciar um projeto Next.js na sua IDE. Veja que as altera\u00e7\u00f5es nos arquivos para utiliza\u00e7\u00e3o do Typescript e React (tsx) est\u00e3o prontas.<\/p>\r\n\r\n\r\n\r\n Essa vai ser basicamente a estrutura que voc\u00ea ver\u00e1 inicialmente. Uma informa\u00e7\u00e3o importante \u00e9 que a pasta com nome \u201cpages\u201d N\u00c3O pode ter seu nome alterado<\/strong>, pois, \u00e9 a partir dessa pasta que o Next far\u00e1 a busca por suas p\u00e1ginas. Colocar essa pasta dentro de outra pasta chamada \u201csrc\u201d \u00e9 o m\u00e1ximo que pode ser feito, como mostra a figura 3.<\/p>\r\n\r\n\r\n\r\n Uma funcionalidade bem legal do Next \u00e9 como ele trata o roteamento das p\u00e1ginas. N\u00e3o \u00e9 preciso realizar nenhum tipo de configura\u00e7\u00e3o ou alguma biblioteca para fazer o tratamento de rotas.<\/p>\r\n\r\n\r\n\r\n Nesse sentido, basta criar uma p\u00e1gina dentro da pasta \u201cpages\u201d e o pr\u00f3prio Next.js vai entender que aquele arquivo \u201c.tsx \u201c \u00e9 uma rota acess\u00e1vel. Esse comportamento torna a cria\u00e7\u00e3o e roteamento das p\u00e1ginas muito mais f\u00e1cil.<\/p>\r\n\r\n\r\n\r\n Ao criar um arquivo dentro da pasta \u201cpages\u201d, o Next.js automaticamente ir\u00e1 assumir que o nome daquele arquivo \u00e9 um endere\u00e7o acess\u00edvel da sua aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n Caso seja necess\u00e1rio criar algum arquivo ou alguma pasta dentro dessa pasta que n\u00e3o ser\u00e1 vista como um endere\u00e7o, basta acrescentar o \u201c_\u201d antes do nome do arquivo ou pasta, assim como \u00e9 com o arquivo \u201c_app.tsx<\/em>\u201d.<\/p>\r\n\r\n\r\n\r\n Ainda dentro das funcionalidades de rotas do Next, \u00e9 importante falar sobre rotas din\u00e2micas<\/strong>. Caso seja necess\u00e1rio passar algum par\u00e2metro ou um nome de algum produto, por exemplo, para a rota, basta incluir dois colchetes no nome da p\u00e1gina, como mostra a figura 4:<\/p>\r\n\r\n\r\n\r\n <\/p>\r\n\r\n\r\n\r\n Dessa forma, veja como ficou a estrutura de pastas:<\/p>\r\n\r\n\r\n\r\n Observe que o nome entre colchetes poderia ser qualquer outro, por\u00e9m, para representar o slug de algum produto de uma loja, usamos esse nome.<\/p>\r\n\r\n\r\n\r\n Para recuperar esse par\u00e2metro, basta utilizar o useRouter()<\/em> do pr\u00f3prio next\/router, como mostra a figura 6:<\/p>\r\n\r\n\r\n\r\n Em seguida, para mostrar como o Next trata requisi\u00e7\u00f5es que v\u00eam de uma API, vamos criar uma API de exemplo, utilizando o json-server, que j\u00e1 nos traz bastante funcionalidades.<\/p>\r\n\r\n\r\n\r\n S\u00f3 para exemplificar, segue abaixo o c\u00f3digo da nossa API:<\/p>\r\n\r\n\r\n\r\n Como primeiro exemplo, vamos falar sobre o Client Side Fetching<\/strong>, para consumir essa API. Esse m\u00e9todo \u00e9 a maneira de buscar informa\u00e7\u00f5es de uma API do jeito mais tradicional poss\u00edvel no React: usando o useEffect<\/em>, por exemplo.<\/p>\r\n\r\n\r\n\r\n A estrat\u00e9gia de Client Side Fetching deve ser utilizada apenas quando n\u00e3o h\u00e1 a necessidade de que as informa\u00e7\u00f5es vindas da API sejam indexadas pelos motores de busca, pois, uma chamada vinda do useEffect s\u00f3 ser\u00e1 disparada no browser, ou seja, o conte\u00fado da p\u00e1gina n\u00e3o ser\u00e1 renderizado pelo lado do servidor. \u00c9 poss\u00edvel observar esse comportamento desabilitando o javascript do borwser.<\/p>\r\n\r\n\r\n\r\n Com o javascript desabilitado, as informa\u00e7\u00f5es vindas da API atrav\u00e9s do useEffect<\/em>, n\u00e3o ser\u00e3o exibidas em nenhum momento. Abaixo h\u00e1 um c\u00f3digo de uma implementa\u00e7\u00e3o desse conceito:<\/p>\r\n\r\n\r\n\r\n Na figura 7 voc\u00ea ver\u00e1 o resultado dessa chamada \u00e0 nossa API:<\/p>\r\n\r\n\r\n\r\n Como \u00e9 poss\u00edvel verificar, essa chamada para o nosso backend funciona normalmente utilizando o Next.js, da mesma forma do que quando utilizamos o React sem esse framework. Mas, o que eu gostaria de mostrar \u00e9 o comportamento a seguir. Verifiquem, na figura 8, o resultado se n\u00f3s desabilitamos o Javascript do nosso navegador e damos um refresh na p\u00e1gina:<\/p>\r\n\r\n\r\n\r\n Observe que nenhuma informa\u00e7\u00e3o de nossa chamada utilizando o useEffect foi exibida em tela. Como explicado anteriormente, essa chamada ser\u00e1 executada apenas pelo lado do cliente.<\/p>\r\n\r\n\r\n\r\n Existe algum problema com esse tipo de chamada? Claro que n\u00e3o, por\u00e9m, \u00e9 importante apenas entender as estrat\u00e9gias de renderiza\u00e7\u00e3o dispon\u00edveis e em quais momentos elas podem se aplicar. Nesse caso, se for necess\u00e1ria a indexa\u00e7\u00e3o por motores de busca, essa n\u00e3o ser\u00e1 a melhor estrat\u00e9gia.<\/p>\r\n\r\n\r\n\r\n Como j\u00e1 adiantado anteriormente, uma outra maneira de consumo de dados em uma API no Next.js, \u00e9 utilizando o Sever Side Rendering. Essa estrat\u00e9gia nos oferece a possibilidade de apresentar todos os dados de uma s\u00f3 vez para o cliente. Isso implica em carregar todos os dados primeiramente no lado do servidor, nesse caso, utilizando um servidor Node.js (lembra o fluxo que a gente apresentou no in\u00edcio desse artigo?), e assim todo o conte\u00fado da p\u00e1gina estar\u00e1 dispon\u00edvel para ser exibido para o cliente de uma s\u00f3 vez.<\/p>\r\n\r\n\r\n\r\n S\u00f3 para exemplificar melhor esse comportamento, vamos executar nosso json-server<\/em> utilizando um par\u00e2metro \u201c-d 2000<\/em>\u201d, para simular um delay de 2 segundos em nossa chamada ao backend.<\/p>\r\n\r\n\r\n\r\n O comando ficar\u00e1 assim:<\/p>\r\n\r\n\r\n\r\n Com esse delay na chamada ao nosso backend, vai ser poss\u00edvel observar que o t\u00edtulo da nossa p\u00e1gina, no caso, \u201cProducts\u201d, exibir\u00e1 2 segundos antes do conte\u00fado da chamada para a nossa API.<\/p>\r\n\r\n\r\n\r\n Se desabilitarmos o Javascript do navegador, vamos ver que o conte\u00fado nunca ser\u00e1 exibido, como exemplificado na se\u00e7\u00e3o anterior. Para contornar esse comportamento, o Next.js oferece a funcionalidade de Server Side Rendering.<\/p>\r\n\r\n\r\n\r\n Para come\u00e7ar, vamos tirar toda a chamada feita pelo useEffect<\/em> do nosso c\u00f3digo:<\/p>\r\n\r\n\r\n\r\n Agora vamos utilizar uma fun\u00e7\u00e3o chamada getServerSideProps. Ao utilizarmos essa fun\u00e7\u00e3o, o Next.js, far\u00e1 a pr\u00e9 renderiza\u00e7\u00e3o da p\u00e1gina usando o retorno dessa fun\u00e7\u00e3o. \u00c9 poss\u00edvel acessar qualquer retorno dessa fun\u00e7\u00e3o em nosso componente, atrav\u00e9s de propriedades.<\/p>\r\n\r\n\r\n\r\n Vamos transferir nossa chamada \u00e0 API para essa fun\u00e7\u00e3o, fazendo algumas altera\u00e7\u00f5es para utiliz\u00e1-la com o formado async await, que \u00e9 uma sintaxe mais moderna. Al\u00e9m da chamada \u00e0 API, como estamos utilizando Typescript, vamos tipar essa fun\u00e7\u00e3o para que possamos retornar as propriedades que precisamos. Por isso vamos importar, de dentro do Next.js, a tipagem GetServerSideProps e no retorno da fun\u00e7\u00e3o j\u00e1 vamos ter dispon\u00edvel nossas props.<\/p>\r\n\r\n\r\n\r\n Por\u00e9m, se buscarmos alguma informa\u00e7\u00e3o \u00e0 ser retornada dessas props n\u00e3o vamos encontrar nada. Por isso, vamos criar uma interface chamada ProductsProps, para explicitarmos qual ou quais propriedades queremos retornar dessa fun\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n Essa propriedade ser\u00e1 um array de produtos e ser\u00e1 o par\u00e2metro de retorno de GetServerSideProps.<\/p>\r\n\r\n\r\n\r\n Quando fazemos isso, j\u00e1 temos dispon\u00edvel nossas propriedades para retorno, como mostra a figura 9:<\/p>\r\n\r\n\r\n\r\n Para utilizarmos essa propriedade, precisamos passar como par\u00e2metro para nosso componente, que nesse caso \u00e9 o Home. Precisamos tipar essa propriedade, para deixar claro que tipo de par\u00e2metro estamos repassando para nosso componente.<\/p>\r\n\r\n\r\n\r\n Com isso podemos observar o comportamento da p\u00e1gina bem diferente. Ao realizarmos a chamada para nossa API, vemos que toda a p\u00e1gina demora os 2 segundos, ou seja, toda a p\u00e1gina carrega de uma s\u00f3 vez. Esse comportamento \u00e9 o que desejamos quando precisamos indexar nossas p\u00e1ginas para algum motor de busca, como o Google, por exemplo.<\/p>\r\n\r\n\r\n\r\n Com a p\u00e1gina sendo gerada pelo lado do servidor, nossa aplica\u00e7\u00e3o n\u00e3o vai mais depender do Javascript estar habilitado. Tudo j\u00e1 foi criado e passado para o cliente. Observe o comportamento no v\u00eddeo seguinte:<\/p>\r\n\r\n\r\n\r\n Apenas uma observa\u00e7\u00e3o. \u00c9 recomendado utilizar esse m\u00e9todo apenas quando \u00e9 necess\u00e1rio gerar algum conte\u00fado din\u00e2mico para o cliente ou que precisa estar dispon\u00edvel para os motores de busca.<\/p>\r\n\r\n\r\n\r\n Voc\u00ea vai precisar avaliar a necessidade da sua aplica\u00e7\u00e3o e qual experi\u00eancia voc\u00ea quer oferecer para seus usu\u00e1rios, pois, como \u00e9 poss\u00edvel observar, toda a p\u00e1gina demorou os 2 segundos para aparecer.<\/p>\r\n\r\n\r\n\r\n Um outro m\u00e9todo de data fetching<\/em> dentro do Next.js \u00e9 o Static Site Generation<\/strong>. Traduzindo ao p\u00e9 da letra, seria algo como \u201cGera\u00e7\u00e3o de Sites Est\u00e1ticos\u201d. Basicamente, p\u00e1ginas est\u00e1ticas, s\u00e3o p\u00e1ginas que n\u00e3o ter\u00e3o atualiza\u00e7\u00f5es constantes.\u00a0<\/p>\r\n\r\n\r\n\r\n Onde seria aplic\u00e1vel ou em qual cen\u00e1rio seria poss\u00edvel obter algum benef\u00edcio desse m\u00e9todo? Imagina que voc\u00ea possui um blog ou um ecommerce que em determinada p\u00e1gina n\u00e3o precisa de atualiza\u00e7\u00e3o constante.<\/p>\r\n\r\n\r\n\r\n O comportamento dela seria algo como, fazer uma chamada \u00e0 API e depois exibir aquele conte\u00fado para todos os usu\u00e1rios por um determinado tempo sem atualiza\u00e7\u00e3o.\u00a0<\/p>\r\n\r\n\r\n\r\n Ap\u00f3s a p\u00e1gina ser carregada ou ter feito alguma requisi\u00e7\u00e3o ao banco de dados, nenhuma outra chamada ao banco ou qualquer outra requisi\u00e7\u00e3o \u00e0 API ser\u00e1 feita at\u00e9 o pr\u00f3ximo \u201cciclo\u201d de atualiza\u00e7\u00e3o, que \u00e9 totalmente configur\u00e1vel, como veremos mais adiante.<\/p>\r\n\r\n\r\n\r\n Dessa forma, a p\u00e1gina ser\u00e1 servida de forma totalmente est\u00e1tica. H\u00e1 um ganho relevante de performance utilizando essa forma de servir p\u00e1ginas.<\/p>\r\n\r\n\r\n\r\n O princ\u00edpio para implementa\u00e7\u00e3o \u00e9 quase igual ao Server Side Rendering. Para n\u00e3o apagar o conte\u00fado criado at\u00e9 aqui, pois, ficar\u00e1 dispon\u00edvel para voc\u00ea baixar e consultar no GitHub, vamos criar um outro componente para exemplificar o comportamento da nossa p\u00e1gina.<\/p>\r\n\r\n\r\n\r\n Vamos criar um componente chamado \u201ccategories\u201d. Esse componente exibir\u00e1 todas as categorias de produtos cadastrados em nossa API. Acredito que n\u00e3o seja necess\u00e1rio explicar detalhadamente o c\u00f3digo abaixo, pois, \u00e9 basicamente o mesmo c\u00f3digo apresentado na se\u00e7\u00e3o anterior, por\u00e9m, agora estamos chamando uma fun\u00e7\u00e3o chamada getStaticProps, que possui o tipo GetStaticProps, importado de dentro de Next.js.<\/p>\r\n\r\n\r\n\r\n Ap\u00f3s a implementa\u00e7\u00e3o da nossa fun\u00e7\u00e3o getStaticProps, nossa p\u00e1gina categories est\u00e1 sendo gerada totalmente de forma est\u00e1tica. Em ambiente de desenvolvimento \u00e9 dif\u00edcil reproduzir esse comportamento, pois, estamos utilizando um delay de 2 segundos em nossa chamada \u00e0 API. Mas em ambiente de produ\u00e7\u00e3o, essa p\u00e1gina seria carregada totalmente de forma est\u00e1tica, gerando um ganho de performance muito significativo.<\/p>\r\n\r\n\r\n\r\n Na figura 10 podemos ver nossa p\u00e1gina.<\/p>\r\n\r\n\r\n\r\n Ok, j\u00e1 temos nossa p\u00e1gina est\u00e1tica sendo gerada, mas e se eu quiser que o conte\u00fado dessa p\u00e1gina seja atualizado com alguma informa\u00e7\u00e3o ou que alguma informa\u00e7\u00e3o seja retirada? Nesse momento, caso alguma informa\u00e7\u00e3o, por exemplo, seja acrescentada \u00e0 nossa API, essa p\u00e1gina n\u00e3o seria atualizada em tempo real, lembre-se que ela est\u00e1 sendo gerada estaticamente.<\/p>\r\n\r\n\r\n\r\n Por exemplo, ao acrescentar mais uma categoria em nossa API, nossa p\u00e1gina n\u00e3o faria uma nova chamada a API para atualizar o conte\u00fado exibido e permaneceria desatualizada em rela\u00e7\u00e3o ao conte\u00fado armazenado no banco de dados. A figura 11 mostra que acrescentamos mais uma categoria em nossa API:<\/p>\r\n\r\n\r\n\r\n Para contornar esse comportamento, a fun\u00e7\u00e3o do tipo GetStaticProps<\/em>, oferece uma propriedade chamada \u201crevalidate\u201d. Essa propriedade \u00e9 utilizada para informar \u00e0 nossa fun\u00e7\u00e3o quando o conte\u00fado da p\u00e1gina deve ser atualizado em segundos. Por exemplo, no c\u00f3digo a seguir, inserimos 5, para indicar que queremos que o conte\u00fado da p\u00e1gina seja revalidado ou atualizado a cada 5 segundos.<\/p>\r\n\r\n\r\n\r\n Em ambiente de desenvolvimento \u00e9 dif\u00edcil reproduzir o comportamento do revalidate, por\u00e9m, em um ambiente de produ\u00e7\u00e3o, o Next.js far\u00e1 a atualiza\u00e7\u00e3o da p\u00e1gina totalmente de forma autom\u00e1tica, sem qualquer outra a\u00e7\u00e3o nossa. Isso \u00e9 extremamente \u00fatil no dia a dia para ganhar performance em nossas aplica\u00e7\u00f5es.\u00a0<\/strong><\/p>\r\n\r\n\r\n\r\n S\u00f3 para se ter uma ideia de performance, imagina que sua aplica\u00e7\u00e3o tenha 1000 acessos em um intervalo de sessenta segundos. Ao inv\u00e9s de mil chamadas \u00e0 sua API, seriam apenas 12.<\/p>\r\n\r\n\r\n\r\n \u00c9 um ganho gigante em performance. Ressaltando que, \u00e9 sempre importante avaliar as necessidades dos usu\u00e1rios que v\u00e3o utilizar sua aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n Por fim, nesse artigo tivemos uma vis\u00e3o geral sobre o que \u00e9 o Next.js e onde ele pode se encaixar em nossos projetos. O Next.js \u00e9 uma ferramenta muito vers\u00e1til e pode ser utilizada na grande maioria de seus projetos.\u00a0<\/p>\r\n\r\n\r\n\r\n Tamb\u00e9m apresentamos algumas fun\u00e7\u00f5es e seus comportamentos, como o Client Side Fetching, que apesar do nome bonito, \u00e9 uma chamada \u00e0 API da forma tradicional feita no React.<\/p>\r\n\r\n\r\n\r\n O Server Side Rendering, que \u00e9 a gera\u00e7\u00e3o de conte\u00fado sendo feita pelo lado do servidor Node.js que o Next.js possui, que apresenta a p\u00e1gina totalmente pronta de uma s\u00f3 vez para o cliente.<\/p>\r\n\r\n\r\n\r\n E por \u00faltimo, foi apresentado a fun\u00e7\u00e3o Static Site Generation, que gera as p\u00e1ginas de forma est\u00e1tica, oferecendo um ganho de performance bastante interessante.<\/p>\r\n\r\n\r\n\r\n Para extrair ao m\u00e1ximo de benef\u00edcios dos recursos oferecidos pelo Next.js, \u00e9 sempre importante avaliar o cen\u00e1rio em que sua aplica\u00e7\u00e3o vai ser utilizada e se algum dos recursos aqui apresentados faz sentido e em quais momentos. Nesse sentido, o bom senso e um bom planejamento s\u00e3o sempre bem-vindos nessas horas.<\/p>\r\n\r\n\r\n\r\n Reposit\u00f3rio do GitHub: https:\/\/github.com\/AlbertDev33\/Artigo-para-geekhunter<\/a><\/p>\r\n\r\n\r\n\r\n Refer\u00eancias: Next.js by Vercel – The React Framework<\/a><\/p>\r\n\r\n\r\n\r\n Leia mais sobre as fun\u00e7\u00f5es apresentadas nesse artigo aqui: Basic Features: Data Fetching | Next.js<\/a><\/p>\r\n\r\n\r\n\r\n O que \u00e9 o Next.js? Next.js \u00e9 um framework para React. O que isso quer dizer? O React \u00e9 uma biblioteca Javascript para constru\u00e7\u00e3o de interfaces e o Next \u00e9 considerado um framework pois adiciona v\u00e1rias funcionalidades em cima do React. Algumas funcionalidades do Next.js: renderiza\u00e7\u00e3o est\u00e1tica e pelo lado do servidor. Possui suporte ao […]<\/p>\n","protected":false},"author":6,"featured_media":11635,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-11616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimiento-de-software"],"acf":[],"yoast_head":"\n![\"o-que-e-next-js\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/fluxo-requisicao-next-js.png\")
\r\nIntegrando o Typescript ao projeto com Next.js<\/strong><\/h2>\r\n\r\n\r\n\r\n
yarn create next-app nome-do-seu-projeto<\/code><\/pre>\r\n\r\n\r\n\r\nnpx create-next-app nome-do-seu-projeto<\/code><\/pre>\r\n\r\n\r\n\r\nyarn add typescript @types\/react @types\/node \u2013D<\/code><\/pre>\r\n\r\n\r\n\r\nnpm install typescript @types\/react @types\/node \u2013D<\/code><\/pre>\r\n\r\n\r\n\r\nComo funciona a constru\u00e7\u00e3o das p\u00e1ginas e rotas?<\/h3>\r\n\r\n\r\n\r\n
![\"pastas-iniciais-ide\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/estrutura-pastas-ide.png\")
\r\n![\"pasta-src-adicionada\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/pastas-ide-com-src.png\")
\r\nRoteamento das p\u00e1ginas<\/h3>\r\n\r\n\r\n\r\n
![\"rotas-dinamicas-next.js\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/rotas-dinamicas-next-js.png\")
\r\n![\"estrutura-de-pastas-atual-next-js\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/estrutura-de-pastas-atual-next-js.png\")
\r\n![\"recuperar-parametro-next.js\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/recuperar-parametro.png\")
\r\nimport { useRouter } from 'next\/router';\r\n \r\nexport default function product() {\r\n const router = useRouter();\r\n \r\n return <h1>{router.query.slug}<\/h1>\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\nTratamento de dados vindos de uma API<\/strong><\/h2>\r\n\r\n\r\n\r\n
{\r\n \"categories\": [\r\n { \"id\": \"teclados\", \"title\": \"Teclados\" },\r\n { \"id\": \"notebooks\", \"title\": \"Notebooks\" },\r\n { \"id\": \"armazenamento\", \"title\": \"SSD\" },\r\n { \"id\": \"gabinetes\", \"title\": \"Gabinetes\" },\r\n { \"id\": \"mouses\", \"title\": \"Mouses\" }\r\n ],\r\n \"products\": [\r\n { \"id\": 1, \"title\": \"Teclado Mec\u00e2nico\", \"price\": 350, \"category_id\": \"teclados\", \"slug\": \"teclado-mecanico\"},\r\n { \"id\": 2, \"title\": \"Mouse Gamer\", \"price\": 120.9, \"category_id\": \"mouses\", \"slug\": \"mouse-gamer\"},\r\n { \"id\": 3, \"title\": \"SSD 512GB\", \"price\": 650.45, \"category_id\": \"ssd\", \"slug\": \"ssd-512gb\"},\r\n { \"id\": 4, \"title\": \"Notebook Gamer\", \"price\": 7000, \"category_id\": \"notebooks\", \"slug\": \"notebook-gamer\"},\r\n { \"id\": 5, \"title\": \"Monitor Gamer\", \"price\": 2000, \"category_id\": \"monitores\", \"slug\": \"monitor-gamer\"},\r\n { \"id\": 6, \"title\": \"Gabinete Gamer\", \"price\": 500, \"category_id\": \"gabinetes\", \"slug\": \"gabinete-gamer\"}\r\n ],\r\n \"recommended\": [\r\n { \"id\": 1, \"title\": \"Teclado Merc\u00e2nico\", \"price\": 350, \"category_id\": \"teclados\", \"slug\": \"teclado-mecanico\"},\r\n { \"id\": 4, \"title\": \"Notebook Gamer\", \"price\": 7000, \"category_id\": \"notebooks\", \"slug\": \"notebook-gamer\"}\r\n ]\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\nimport React, { FormEvent, useEffect, useState } from 'react';\r\n \r\nimport api from '..\/service\/api';\r\n \r\ninterface IProducts {\r\n id: number;\r\n title: string;\r\n}\r\n \r\nexport default function Home() {\r\n const [products, setProducts] = useState<IProducts[]>([]);\r\n \r\n\/\/ Chamada \u00e0 API utilizando o Client Side Fetching\r\n useEffect(() => {\r\n api.get('http:\/\/localhost:3333\/products').then(response => {\r\n setProducts(response.data);\r\n })\r\n }, []);\r\n \r\n return (\r\n <div>\r\n <h1>Products<\/h1>\r\n \r\n <section>\r\n <ul>\r\n {products.map(product => {\r\n return (\r\n <li key={product.id}>\r\n {product.title}\r\n <\/li>\r\n )\r\n })}\r\n <\/ul>\r\n <\/section>\r\n <\/div>\r\n )\r\n}\r\n \r\nexport default Home;<\/code><\/pre>\r\n\r\n\r\n\r\n![\"cahamda-api-next.js\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/chamada-a-api.png\")
\r\n![\"desabilitar-javascript-next-js\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/desabilitar-javascript-next-js.png\")
\r\nServer Side Rendering<\/strong><\/h2>\r\n\r\n\r\n\r\n
npx json-server server.json -p 3333 -d 2000<\/code><\/pre>\r\n\r\n\r\n\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/delay-backend.png\")
<\/figure>\r\n\r\n\r\n\r\nComo funciona na pr\u00e1tica o Server Side Rendering em Next.js<\/h3>\r\n\r\n\r\n\r\n
import React from 'react';\r\n \r\nimport api from '..\/service\/api';\r\n \r\ninterface IProducts {\r\n id: number;\r\n title: string;\r\n}\r\n \r\nexport default function Home() {\r\n return (\r\n <div>\r\n <h1>Products<\/h1>\r\n \r\n <section>\r\n <ul>\r\n {products.map(product => {\r\n return (\r\n <li key={product.id}>\r\n {product.title}\r\n <\/li>\r\n )\r\n })}\r\n <\/ul>\r\n <\/section>\r\n <\/div>\r\n )\r\n }\r\n<\/code><\/pre>\r\n\r\n\r\n\r\nexport const getServerSideProps: GetServerSideProps = async () => {\r\n const response = await api.get('http:\/\/localhost:3333\/products');\r\n \r\n const products = await response.data;\r\n \r\n return {\r\n props: {\r\n \r\n }\r\n }\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\ninterface IProducts {\r\n id: number;\r\n title: string;\r\n}\r\n \r\ninterface ProductProps {\r\n products: IProducts[];\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\nexport const getServerSideProps: GetServerSideProps<ProductProps> = async () => {\r\n const response = await api.get('http:\/\/localhost:3333\/products');\r\n \r\n const products = await response.data;\r\n \r\n return {\r\n props: {\r\n \r\n }\r\n }\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\nPropriedades para retorno<\/h3>\r\n\r\n\r\n\r\n
![\"retorno-funcao-gerserversideprops\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/retorno-funcao-gerserversideprops.png\")
\r\nexport default function Home({ products }: ProductProps) {\r\n return (\r\n <div>\r\n <h1>Products<\/h1>\r\n \r\n <section>\r\n <ul>\r\n {products.map(product => {\r\n return (\r\n <li key={product.id}>\r\n {product.title}\r\n <\/li>\r\n )\r\n })}\r\n <\/ul>\r\n <\/section>\r\n <\/div>\r\n )\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/comportamento-video.png\")
<\/figure>\r\n\r\n\r\n\r\nStatic Site Generation<\/strong><\/h2>\r\n\r\n\r\n\r\n
E como implementar o site est\u00e1tico com Next.js<\/h3>\r\n\r\n\r\n\r\n
import React from 'react';\r\nimport { GetStaticProps } from 'next';\r\n \r\nimport api from '..\/service\/api';\r\n \r\nimport { Container } from '..\/..\/styles\/Dashboard\/styles';\r\n \r\ninterface ICategories {\r\n id: number;\r\n title: string;\r\n}\r\n \r\ninterface CategoryProps {\r\n categories: ICategories[];\r\n}\r\n \r\nexport default function categories({ categories }: CategoryProps) {\r\n return (\r\n <Container>\r\n <h1>Categories<\/h1>\r\n \r\n <section>\r\n <ul>\r\n {categories.map(categorie => {\r\n return (\r\n <li key={categorie.id}>\r\n {categorie.title}\r\n <\/li>\r\n )\r\n })}\r\n <\/ul>\r\n <\/section>\r\n <\/Container>\r\n )\r\n}\r\n \r\nexport const getStaticProps: GetStaticProps<CategoryProps> = async () => {\r\n const response = await api.get('http:\/\/localhost:3333\/categories');\r\n const categories = await response.data;\r\n \r\n return {\r\n props: {\r\n categories,\r\n }\r\n }\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n![\"retorno-api-next.js\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/retorno-api.png\")
\r\n![\"acrescentando-item-api-next.js\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/acrescentando-item-api.png\")
\r\nGetStaticProps<\/em><\/h3>\r\n\r\n\r\n\r\n
export const getStaticProps: GetStaticProps<CategoryProps> = async () => {\r\n const response = await api.get('http:\/\/localhost:3333\/categories');\r\n const categories = await response.data;\r\n \r\n return {\r\n props: {\r\n categories,\r\n },\r\n revalidate: 5,\r\n }\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\nConclus\u00e3o<\/h2>\r\n\r\n\r\n\r\n
![\"cta-banner-next.js\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2021\/01\/cta-next-js.png\")
<\/a><\/figure>\r\n","protected":false},"excerpt":{"rendered":"