• Jordan Santos de Jesus

NextJs – O que é, pra que serve e como utilizar


O que é o NextJs e conceitos iniciais:


O Next, criado pela Vercel em 2016, é uma estrutura web de desenvolvimento front-end React de código aberto, portanto, pela complexidade de camadas que envolvem essa ferramenta são necessários alguns conceitos iniciais para entender como é feito, como funciona, e quais suas principais funções.


JavaScript é uma linguagem de programação criada, a princípio, para ser executada em navegadores e manipular comportamentos de páginas web, a linguagem possui ferramentas nativas para controle de elementos das páginas, gerenciamento de requisições web, programação orientada a objeto e muito mais.


Embora tenha sido criada com o intuito de se tornar uma forma fácil de escrever código front-end, o JavaScript se tornou uma das principais linguagens do mercado, abrangendo não só a maioria dos códigos de front, como até mesmo uma boa parte dos sistemas backend com o NodeJs, que permite a execução de códigos JavaScript fora de um navegador Web.


Atualmente o mercado de front-end tem sido dominado pelos frameworks de JavaScript devido a sua organização, facilidade na reutilização de código, integrações com outras bibliotecas e fácil resolução de problemas com uma abordagem genérica. Embora existam diversas opções, os frameworks mais difundidos no mercado são React, Angular e Vue.


Tecnologias que utilizam JavaScript


Três principais frameworks:



React:


O React, criado pelo Facebook, é utilizado para criar interfaces de usuário, suas principais funcionalidades são as ferramentas disponíveis para auxiliar na criação da UI e o uso de componentes, para que seja possível aumentar o máximo de reuso na aplicação. A principal vantagem é poder escrever “html e JavaScript no mesmo arquivo de código” por meio do jsx, uma extensão para a sintaxe da linguagem JavaScript familiar a muitos desenvolvedores por sua semelhança ao html. Somando o React a bibliotecas de estilização e de gerenciamento de requisições http, o React é um framework bem estabelecido e de muita utilidade.


Exemplo de código jsx:

Principais funcionalidades do Next:


Entendendo os conceitos anteriores é possível partir para o assunto principal. O NextJs por ser um framework do React tem basicamente a mesma sintaxe e forma de codificar, utilizando as mesmas funcionalidades de state e props, o adicional do Next está em suas novas ferramentas e funcionalidades, sendo as principais o SSR (Server-side Rendering) e o SSG (Static-site Generation).


O Server-side Rendering, como o próprio nome sugere, pré-renderiza a página em cada request usando os dados retornados pela função “getServerSideProps”, o que significa dizer que em um intervalo de tempo especificado pelo desenvolvedor, a partir da primeira visita a página, o conteúdo recebido das primeiras requisições fica salvo no cache de um servidor Node e é utilizado para gerar e popular as páginas html a partir das próximas visitas, reduzindo absurdamente a quantidade de requisições e consequentemente o custo de manter a aplicação. Além disso, o conteúdo fica disponível para as SEO, facilitando a indexação da aplicação e otimizando os resultados das buscas.


Também conhecido como pré-render, o Static Site Generation funciona de modo similar ao SSR, mas dessa vez o que fica salvo no cache é o html e o css da página, já com o conteúdo estático e indexável. Utilizando a função “getStaticProps” os dados requisitados da página estarão disponíveis em tempo de build, proporcionando uma geração de página incrivelmente rápida e fluida.


Fluxos SSR e SSG:


Outras funcionalidades do Next:


Além das funcionalidades citadas anteriormente, o Next fornece diversas outras vantagens e ferramentas como:


- Image Optimization com otimização de imagem automática com building instantâneo a partir do componente <Image>.

- Internacionalização com a construção de rotas de domínio e subdomínio e detecção automática de linguagem.

- Next.js Analytics, uma ferramenta de pontuação baseada nos dados de visitas reais e insights página por página.

- Zero Config com compilação automática e otimizado para produção desde o início.

- SSG e SSR híbridos em páginas pré renderizadas em tempo de build ou tempo de request no mesmo projeto.

- Incremental Static Regeneration para adicionar e atualizar estaticamente páginas pré-renderizadas.

- Suporte ao TypeScript com configuração e compilação automática.

- Fast Refresh com atualização automática da página enquanto está sendo codificada.

- File-system Routing em que todos os componentes na pasta “pages” se tornam automaticamente uma rota.

- API Routes para criar opcionalmente endpoints de API que fazem funcionalidades de backend.

- Built-in CSS Support para criar estilos css ou scss a nível dos componentes.


Quem utiliza o NextJs?


Exemplos de empresas que utilizam o Next são : TikTok, Netflix, Hulu, Twitch, GitHub, HboMax, Nike, AT&T, Tencent, IGN, PlayStation, HostGator, Starbucks e diversas outras empresas que podem ser encontradas no próprio site do Next.


Referências:

https://nextjs.org/


Artigo escrito por Jordan Santos de Jesus

0 visualização0 comentário