Desenvolvendo em React com o framework Next Js - #CommunityWeekChallenge

#CommunityWeekChallenge

O que é o Next.js?

Next.js é um framework para React. Como assim?

O React é uma biblioteca Javascript para construção de interfaces e o Next é considerado um framework pois adiciona várias funcionalidades em cima do React.

Algumas funcionalidades do Next.js que o fazem especial : renderização estática e pelo lado do servidor (server side rendering). Possui suporte ao Typescript e um serviço de tratamento de rotas muito interessante, facilitando a paginação e roteamentos.

Muitas funcionalidades são mais perceptíveis com a nossa aplicação em produção, pois o Next possui dois pontos principais em seu objetivo: tornar nossa aplicação React mais performática e a questão da indexação do conteúdo da página pelos motores de busca (SEO otimizado).

Sobre esse ponto da indexação, quando desenvolvemos nossas aplicações da maneira tradicional com React, toda nossa interface e toda chamada à API se faz pelo lado do cliente (browser).

Então, quando algum motor de busca ou crawler tentar indexar uma página feita em React, geralmente não vai esperar que 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 nossa aplicação consiga ser indexada.

Onde o Next.js se encaixa nessa salada? Para poder gerar toda a página para o browser, o Next utiliza um servidor Node.js. Utiliza-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. Esse comportamento chama-se Server-Side-Rendering.

Isso ajuda muito a construir interfaces de front-end com mais qualidade e manutenibilidade, E tem compatibilidade com as principais bibliotecas react , styled-components, react-bootstrap, sass, e outras. Assim podendo utilizar tudo que há de mais moderno no desenvolvimento web, trazendo rapidez e organização do código, integração com testes, formatadores e outras ferramentas de manutenção de código, além de ter integração com a Vercel, facilitando na compatibilidade do deploy e funcionalidades.

Não perca e aprenda Next,js esse é o próximo passo no ecossistema React, é qualidade de vida quando de trata de Front-end com server side rendering.

Translation

#CommunityWeekChallenge

What is Next.js?

Next.js is a framework for React. Like this?

React is a Javascript library for building interfaces and Next is considered a framework because it adds several features on top of React.

Some features of Next.js that make it special: static and server side rendering. It has Typescript support and a very interesting route handling service, making paging and routing easier.

Many features are more noticeable with our application in production, as Next has two main points in its objective: to make our React application more performant and the issue of indexing the page content by search engines (optimized SEO).

Regarding this point of indexing, when we develop our applications in the traditional way with React, all our interface and all API calls are done on the client side (browser).

So, when some search engine or crawler tries to index a page made in React, it usually won't expect our application to do the Javascript loading, API calls and all the construction of the page.

That is, this search returns empty or without the most relevant information for our application to be indexed.

Where does Next.js fit into this salad? In order to generate the entire page for the browser, Next uses a Node.js server. Node.js is used in this scenario only because it understands Javascript natively.

In this way, Next can deliver the page ready to the Browser, that is, all the HTML, CSS and Javascript. This behavior is called Server-Side-Rendering.

This helps a lot to build front-end interfaces with more quality and maintainability, AND has compatibility with the main react libraries, styled-components, react-bootstrap, sass, and others. Thus, being able to use all that is most modern in web development, bringing speed and code organization, integration with tests, formatters and other code maintenance tools, in addition to having integration with Vercel, facilitating the compatibility of the deploy and features.

Don't miss out and learn Next,js this is the next step in the React ecosystem, it's quality of life when it comes to Front-end with server side rendering.

Felipe Huffner - 28/06/2022

Feito para a #CommunityWeekChallenge