{"id":6829,"date":"2021-08-24T08:26:01","date_gmt":"2021-08-24T11:26:01","guid":{"rendered":"http:\/\/luby.com.br\/?p=6829"},"modified":"2021-08-24T08:26:01","modified_gmt":"2021-08-24T11:26:01","slug":"principais-funcionalidades-next-js","status":"publish","type":"post","link":"https:\/\/luby.com.br\/desenvolvimento\/software\/principais-funcionalidades-next-js\/","title":{"rendered":"Principais funcionalidades do Next JS"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Quando falamos sobre frameworks<\/em> que est\u00e3o em ascens\u00e3o (ou o famoso hype)<\/em>, \u00e9 imposs\u00edvel n\u00e3o citarmos o Next.js<\/strong>. Mas, afinal, do que exatamente esse framework \u00e9 capaz, e como ele se compara a outros frameworks<\/em>?<\/p>\n

[adrotate banner=”4″]<\/p>\n

Inicialmente lan\u00e7ado em 25 de outubro de 2006, Next.js<\/strong> surgiu como um framework React<\/em><\/a>, com a proposta de facilitar a vida do desenvolvedor, trazendo v\u00e1rias features<\/em> focadas em resolver problemas recorrentes<\/strong>. Como um roteamento din\u00e2mico<\/a>, SSR<\/a> (server side rendering)<\/em> e *SSG<\/a> (static*site generation)<\/em>, roteamento pelo lado do cliente, utilizando fun\u00e7\u00f5es como o prefetch<\/em> para carregamentos mais r\u00e1pidos, suporte ao C<\/a>SS<\/a> e Sass, ou qualquer outra biblioteca CSS<\/a> javascript, suporte para Fast Refresh<\/em> e rotas API para cria\u00e7\u00e3o de endpoints e fun\u00e7\u00f5es serveless.<\/em><\/p>\n

Mas, afinal, do que o Next JS \u00e9 capaz?<\/h2>\n

O Next.js \u00e9 um servidor Node que funciona como uma camada entre o c\u00f3digo React e o browser (cliente)<\/strong>. Ele faz o interm\u00e9dio da renderiza\u00e7\u00e3o dos componentes e apresenta\u00e7\u00e3o deles para o cliente e conta com diversas features<\/em> que ser\u00e3o listadas abaixo.<\/p>\n

\"Diagrama
Diagrama de funcionamento do *SSR*<\/figcaption><\/figure>\n

SSR (Server-side Rendering)<\/h2>\n

Como o pr\u00f3prio nome sugere, esse processo nada mais \u00e9 do que a renderiza\u00e7\u00e3o<\/a> dos elementos HTML do lado do servidor. Portanto, isso traz algumas vantagens e desvantagens em rela\u00e7\u00e3o ao CSR<\/em> (client server <\/em>rendering<\/em>), que listamos abaixo:<\/p>\n

Vantagens<\/h3>\n

1. Seguran\u00e7a de dados<\/h4>\n

Muitas vezes, quando fazemos “queries”<\/em> no banco de dados, trazemos algumas informa\u00e7\u00f5es adicionais ou privadas que n\u00e3o deveriam estar dispon\u00edveis para os usu\u00e1rios. Neste caso, o SSR<\/em> nos d\u00e1 uma prote\u00e7\u00e3o adicional, uma vez que os dados est\u00e3o sendo armazenados no servidor Node do Next.js e apenas as informa\u00e7\u00f5es que devem ser mostradas estar\u00e3o presentes no lado do cliente.<\/p>\n

2. Velocidade de carregamento das p\u00e1ginas<\/h4>\n

Ao renderizar uma p\u00e1gina utilizando o CSR<\/em>, o browser deve fazer o download<\/em> dos arquivos javascript para ent\u00e3o execut\u00e1-los. Assim, arquivos grandes podem fazer com que o carregamento da p\u00e1gina demore mais. Todavia, isso n\u00e3o ocorre ao utilizar o SSR,<\/em> uma vez que o carregamento \u00e9 feito pelo lado do servidor e apenas o resultado da execu\u00e7\u00e3o \u00e9 exibido no cliente. Alguns testes<\/a> indicam grandes melhorias em performance<\/em>.<\/p>\n

3. Melhor previs\u00e3o de performance e processamento<\/h4>\n

Uma vez que a renderiza\u00e7\u00e3o \u00e9 feita pelo lado do servidor e sabemos as especifica\u00e7\u00f5es dele, uma medi\u00e7\u00e3o de performance,<\/em> em todos os dispositivos que se conectaram aquele website, ser\u00e1 muito precisa!<\/p>\n

4. Melhor integra\u00e7\u00e3o com SEO (Search Engines Optimization)<\/h4>\n

Atualmente, ferramentas de busca t\u00eam tido um dif\u00edcil trabalho ao tentar indexar p\u00e1ginas que utilizam <\/strong>CSR<\/strong>. <\/em>Isso porque, com esse tipo de renderiza\u00e7\u00e3o, toda a informa\u00e7\u00e3o de websites adv\u00e9m da execu\u00e7\u00e3o de c\u00f3digos em javascript. Crawlers<\/em> respons\u00e1veis por adquirir informa\u00e7\u00f5es da p\u00e1gina e index\u00e1-las para busca, em sua grande maioria, o fazem desabilitando o javascript e pegando apenas informa\u00e7\u00f5es provindas do HTML, uma vez que baixar esses arquivos e execut\u00e1-los seria muito custoso para as SE (search engines<\/em>).<\/p>\n

Como podemos observar, esse problema \u00e9 facilmente contornado ao utilizar SSR<\/em>, j\u00e1 que o conte\u00fado apresentado ao cliente \u00e9 efetivamente HTML, que foi renderizado pelo c\u00f3digo javascript no lado do servidor. Vale lembrar que o SSR<\/em> n\u00e3o \u00e9 “bala de prata”,<\/em> ou seja, existem momentos em que sua utiliza\u00e7\u00e3o n\u00e3o \u00e9 necess\u00e1ria ou recomendada. Logo, algumas desvantagens devem ser citadas.<\/p>\n

Desvantagens<\/h3>\n

1. Maior gasto com servidores<\/h4>\n

Se uma p\u00e1gina \u00e9 demandada de muitas renderiza\u00e7\u00f5es, isso pode ser custoso para o servidor e acaba impactando o gasto financeiro para manter a aplica\u00e7\u00e3o.<\/p>\n

2. Incompatibilidade com algumas bibliotecas<\/h4>\n

Algumas bibliotecas que utilizam objetos window<\/em> ou document<\/em> podem n\u00e3o ser compat\u00edveis com o SSR<\/em>.<\/p>\n

SSG (Static Site Generation)<\/h2>\n

Como o SSR, o SSG executa o javascript no lado do servidor e apresenta para o usu\u00e1rio o HTML compilado. A diferen\u00e7a ocorre no momento da renderiza\u00e7\u00e3o, que acontece em tempo de compila\u00e7\u00e3o<\/a> e n\u00e3o quando as requisi\u00e7\u00f5es s\u00e3o realizadas (SSR<\/em>). Em decorr\u00eancia disto, suas vantagens e desvantagens se assemelham muito.<\/p>\n

Otimiza\u00e7\u00e3o Est\u00e1tica Autom\u00e1tica<\/h2>\n

Next.js<\/strong> \u00e9 capaz de determinar automaticamente se uma p\u00e1gina \u00e9 est\u00e1tica. Fazendo, assim, com que ele possa criar aplica\u00e7\u00f5es h\u00edbridas que cont\u00e9m SSR<\/em> e SSG.<\/em> Um dos principais benef\u00edcios disso \u00e9 que p\u00e1ginas que foram otimizadas n\u00e3o precisam de nenhuma computa\u00e7\u00e3o do lado do servidor, possibilitando entrega de dados de m\u00faltiplos CDN<\/em> (Content Delivery Network<\/em>), o que resulta em um carregamento extremamente r\u00e1pido para os usu\u00e1rios.<\/p>\n

Importa\u00e7\u00e3o din\u00e2mica e separa\u00e7\u00e3o de c\u00f3digos (code splitting)<\/h2>\n

Componentes s\u00f3 s\u00e3o importados e baixados quando s\u00e3o apresentados em tela. Com isso, o processo de espera de requisi\u00e7\u00e3o \u00e9 ainda mais veloz.<\/p>\n

Routing<\/h2>\n

Next.js conta com um sistema de rotas<\/a> integrado ao framework<\/em>, quando um arquivo ou uma pasta \u00e9 adicionada \u00e0 pasta pages,<\/em> o seu nome fica automaticamente dispon\u00edvel como uma rota; e arquivos com o nome index<\/code> s\u00e3o automaticamente roteados para o nome da pasta “m\u00e3e”. Al\u00e9m disso, pastas aninhadas dentro de outras pastas tamb\u00e9m s\u00e3o roteadas.<\/p>\n

-`pages\/index.js` -> `\/`\n-`pages\/blog\/index.js` -> `\/blog`\n-`pages\/blog\/first-post.js` -> `\/blog\/first-post`\n-`pages\/dashboard\/settings\/username.js` \u2192 `\/dashboard\/settings\/username`\n<\/code><\/pre>\n
Tamb\u00e9m \u00e9 poss\u00edvel indexar rotas din\u00e2micas ao utilizar colchetes<\/strong>, que permitem adquirir par\u00e2metros pelo nome que est\u00e1 no interior dos colchetes.<\/p>\n
-`pages\/blog\/[slug].js` \u2192 `\/blog\/:slug` (`\/blog\/next`)\n<\/code><\/pre>\n
No exemplo acima, caso fosse acessado a rota \/blog\/next<\/code>, o valor que recebido pelos par\u00e2metros seria:<\/p>\n
{ \"slug\": \"next\"}\n<\/code><\/pre>\n
De maneira an\u00e1loga, \u00e9 poss\u00edvel pegar todos os caminhos referentes aquela pasta.<\/p>\n
-`pages\/post\/[...slug].js` \/\/ consegue pegar as rotas -> 'post\/a', 'post\/a\/b', etc.\n<\/code><\/pre>\n
Tendo como valor recebido nos par\u00e2metros **um array<\/em>, da seguinte forma:<\/p>\n
-'post\/a' -> {\"slug\": [\"a\"]}\n-'post\/a\/b' -> {\"slug\": [\"a\", \"b\"]}\n<\/code><\/pre>\n
API Routes<\/h2>\n
Next.js conta com rotas de API<\/em>, que servem para uma conex\u00e3o com a API<\/em> do framework<\/em>, an\u00e1logo as rotas da aplica\u00e7\u00e3o, pastas aninhadas dentro de page\/api<\/code> s\u00e3o mapeadas para a rota \/api\/*<\/code>, sendo tratadas como endpoints.<\/em><\/p>\n
De toda forma, \u00e9 importante colocarmos em evid\u00eancia que a API<\/em> do Next n\u00e3o deve substituir um Back-end<\/em> completo<\/a>, e sim facilitar algumas implementa\u00e7\u00f5es no lado do Front-end<\/a>.<\/em> Alguns exemplos j\u00e1 integrados ao Next.js s\u00e3o: a autentica\u00e7\u00e3o social, e a facilidade de implementa\u00e7\u00f5es do chamado JAMStack<\/a>, integrando headless CMSs<\/em> e possibilitando a cria\u00e7\u00e3o de aplica\u00e7\u00f5es completas com a utiliza\u00e7\u00e3o de API<\/em> externas<\/a>.<\/p>\n
Next.js vs React<\/h1>\n
Uma vez que Next.js \u00e9 um framework<\/em> de React<\/em>, \u00e9 prov\u00e1vel que surja a d\u00favida entre qual framework<\/em> escolher ao desenvolver os seus projetos. Nesse t\u00f3pico ser\u00e3o comparadas essas duas ferramentas para elucidar essas incertezas.<\/p>\n
Facilidade dar in\u00edcio a um projeto<\/h3>\n
Tanto o React quando o Next.js possuem maneiras f\u00e1ceis de se iniciar um projeto, com uma simples linha de c\u00f3digo. Ambos est\u00e3o prontos para execu\u00e7\u00e3o.<\/strong><\/p>\n
-NEXT -> yarn create next-app\n-REACT -> yarn create react-app\n<\/code><\/pre>\n
Do mesmo modo, uma vez que Next.js tem um roteamento autom\u00e1tico, menos linhas de c\u00f3digos precisam ser escritas.<\/p>\n
Performance<\/h2>\n
Com features<\/em> como SSR<\/em> e SSG<\/em>, otimiza\u00e7\u00e3o autom\u00e1tica, otimiza\u00e7\u00e3o de imagens (Next 10) e separa\u00e7\u00e3o de c\u00f3digo (code splitting<\/em>), o Next.js ganha em performance<\/em> facilmente, embora seja poss\u00edvel otimizar o React de diversas maneiras. Tudo isso deve ser feito ap\u00f3s a inicializa\u00e7\u00e3o do projeto.<\/p>\n
Comunidade<\/h2>\n
H\u00e1 diversos motivos para que a comunidade seja um fator muito importante ao se escolher um framework.<\/em> Afinal, nenhum desenvolvedor gosta de encontrar um problema que ningu\u00e9m mais se deparou. Em virtude disso, a comunidade do React \u00e9 de longe a maior e conta com mais tutoriais.<\/p>\n
Todavia, vale salientar que Next.js est\u00e1 em grande ascens\u00e3o e que, cada vez mais, a sua comunidade cresce. Al\u00e9m disso, Next.js \u00e9 um framework<\/em> de React, ent\u00e3o, problemas que podem acontecer muitas vezes est\u00e3o intimamente atrelados.<\/p>\n
Veja tamb\u00e9m:<\/p>\n
Extens\u00f5es VS Code Que Voc\u00ea Precisa Conhecer<\/a>.<\/p>\n
Biblioteca de Artigos Sobre Desenvolvimento de Software<\/a>.<\/p>\n
Bot Para testes<\/a>.<\/span><\/p>\n
Conclus\u00e3o<\/h2>\n
Levando em considera\u00e7\u00e3o todos os dados apresentados neste artigo, \u00e9 f\u00e1cil perceber o poder que o Next.js traz consigo e suas implica\u00e7\u00f5es. Todavia, devemos sempre lembrar que Next.js \u00e9 um framework <\/em>de React<\/strong>, e que grande parte de suas implementa\u00e7\u00f5es vem dele. Portanto, uma boa base \u00e9 extremamente necess\u00e1ria.<\/p>\n
Al\u00e9m disso, ter um bom entendimento de SSR<\/em>, SSG<\/em> e CSR<\/em> \u00e9 de extrema valia, uma vez que suas corretas implementa\u00e7\u00f5es impactam fortemente no desempenho e otimiza\u00e7\u00e3o da aplica\u00e7\u00e3o.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n
[adrotate banner=”5″]<\/p>\n","protected":false},"excerpt":{"rendered":"
[vc_row][vc_column][vc_column_text]Quando falamos sobre frameworks que est\u00e3o em ascens\u00e3o (ou o famoso hype), \u00e9 imposs\u00edvel n\u00e3o citarmos o Next.js. Mas, afinal, do que exatamente esse framework \u00e9 capaz, e como ele se compara a outros frameworks? [adrotate banner=”4″] Inicialmente lan\u00e7ado em 25 de outubro de 2006, Next.js surgiu como um framework React, com a proposta de […]<\/p>\n","protected":false},"author":7,"featured_media":6836,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[22,91,35],"tags":[143,144,66],"class_list":["post-6829","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","category-dicas-programacao","category-programacao","tag-next-js","tag-nextjs","tag-reactjs"],"_links":{"self":[{"href":"https:\/\/luby.com.br\/wp-json\/wp\/v2\/posts\/6829"}],"collection":[{"href":"https:\/\/luby.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luby.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luby.com.br\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/luby.com.br\/wp-json\/wp\/v2\/comments?post=6829"}],"version-history":[{"count":0,"href":"https:\/\/luby.com.br\/wp-json\/wp\/v2\/posts\/6829\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/luby.com.br\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/luby.com.br\/wp-json\/wp\/v2\/media?parent=6829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luby.com.br\/wp-json\/wp\/v2\/categories?post=6829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luby.com.br\/wp-json\/wp\/v2\/tags?post=6829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}