Next.js é um framework para React. O que isso quer dizer? O React é uma biblioteca JavaScript para construção de interfaces web e o Next é considerado um framework pois adiciona várias funcionalidades em cima do React.
Quais são as principais funcionalidades do Next.js?
- Renderização estática e pelo lado do servidor.
- Possui suporte ao TypeScript (JavaScript com tipagem).
- E um serviço de tratamento de rotas muito interessante, que vamos detalhar mais durante esse texto.
Muitas funcionalidades são mais perceptíveis quando colocamos a nossa aplicação em produção, pois o Next tem duas principais vantagens: tornar as nossas aplicações React mais performáticas e melhorar a indexação do conteúdo da página pelos motores de busca.
Sobre a questão da indexação, quando desenvolvemos as nossas aplicações da maneira tradicional com React, toda a nossa interface e toda chamada à API se faz pelo lado do cliente (browser).
As principais vantagens do Next.js são tornar as nossas aplicações React mais performáticas e melhorar a indexação do conteúdo da página pelos motores de busca.
Então, quando algum motor de busca ou crawler tentar indexar uma página feita em React, geralmente não vai esperar que a nossa aplicação faça o carregamento do Javascript, chamadas à API e toda a construção da página.
Ou seja, essa busca retorna vazia ou sem as informações mais relevantes para que a nossa aplicação consiga ser indexada.
Onde o Next.js se encaixa nesse cenário? Para gerar toda a página para o browser, o Next utiliza um servidor Node.js. Usa-se Node.js nesse cenário apenas por entender JavaScript nativamente.
Dessa forma, o Next consegue entregar a página pronta para o Browser, ou seja, todo o HTML, CSS e Javascript. Este comportamento chama-se Server-Side-Rendering (renderização do lado do servidor).
Com essa funcionalidade, a página é retornada para o usuário toda montada. Pensando que esse usuário seja um motor de busca, é retornado todo o conteúdo da página, dispondo conteúdo para ser indexado.
O Next.js consegue entregar a página pronta para o Browser, ou seja, todo o HTML, CSS e Javascript. Este comportamento chama-se Server-Side-Rendering.
Isto também tem um grande impacto a nível da experiência do utilizador, pois fazendo a renderização do lado do servidor conseguimos uma melhor performance e consequentemente isto torna a navegação muito mais fácil, rápida e agradável.
Foi por estas e outras funcionalidades que inclusive escolhemos o Next para construir o Sistema de Gestão e Portal do Fidli, onde pudemos aproveitar o Server-Side-Rendering para gerar a página ou seja Autenticações, requisições e outras chamadas a APIs são feitas do lado do servidor deixando o carregamento da página praticamente instantâneo e com carregamentos muito rápidos ao interagir com os componentes visuais e as funcionalidades. Deste modo, os clientes do Fidli conseguem aceder a toda a informação estatística e de gestão do seu programa de fidelização de forma rápida e fluída.




