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:
Artigo escrito por Jordan Santos de Jesus