DEV Community

loading...
Cover image for Next.js - Presente e futuro ūüöÄ

Next.js - Presente e futuro ūüöÄ

Stanley Gomes
Developer passionate about technology.
„ÉĽ3 min read

O que é? Para que serve?

Next.js é um framework de renderização estática no lado do servidor, para a lib Reactjs. Traduzindo: seu código react é compilado no servidor, que retorna para o browser o HTML, CSS e Js.

O Next.js é usado amplamente na comunidade de desenvolvedores javascript e atualmente é mantido pela empresa vercel, que tem criado uma série de serviços
para montar um ecosistema que facilite o trabalho do desenvolvedor.

Alt Text

Mesmo que a vercel ofereça este ecosistema, você pode hospedar seu projeto em qualquer outro lugar. O Next.js é open source.

Principais recursos

De cara, podemos apontar o quanto é fácil iniciar um projeto next.js. Não precisa configurar nada, apenas customizar de acordo com sua necessidade.

Alt Text

O NextJS oferece suporte a todos os navegadores modernos e o IE11. Também suporta code spliting. Ele tem suporte nativo para Typescript, com configuração simples e compilador em tempo real.

No desenvolvimento você escreve o código e as mudanças são refletidas automaticamente no browser graças ao fast refresh.

Ecosistema vercel

Com o Next.js Analytics √© um servi√ßo desse ecosistema. √Č uma m√©trica de boa experi√™ncia de usu√°rio em seu site. Foi construido para responder perguntas como: seu site carrega r√°pido? √© responsivo? √© visualmente est√°vel?

Alt Text

Outra funcionalidade legal da plataforma é o deploy da sua ferramenta, que pode ser feito em apenas um comando e você pode acompanhar todo log de build da aplicação no site da vercel. Você também pode conectar um repositório do github e configurar deploy automatizado quando fizer um push na branch master, por exemplo.

SSR: Server Side Rendering

O SSR é uma técnica utilizada em que o bundle da aplicação react é compilado no servidor e retorna o código compilado para o browser em HTML, CSS e JS. Sem essa técnica, é necessário aguardar o carregamento de todo o bundle que contém o código da sua página para definir como será a página.

Alt Text

Como a compila√ß√£o √© feita no lado do servidor, a renderiza√ß√£o da p√°gina √© mais r√°pida, aumentando assim a reten√ß√£o do usu√°rio e tamb√©m ajudando pessoas com dispositivos antigos e conex√Ķes de internet com baixa velocidade.

Outra grande vantagem √© que dessa forma, os motores de busca como Google, Yahoo e Bing ao lerem o HTML da sua p√°gina v√£o ter muito mais facilidade para indexar o seu conte√ļdo, visto que tudo j√° estar√° compilado.

Futuro

Observando a curva de crescimento de trending do Next.js na comunidade javascript √© poss√≠vel perceber que a utiliza√ß√£o est√° em ascen√ß√£o e j√° por tempo consider√°vel. √Č uma framework completa, est√°vel e muito atualizada.

Alt Text

Esses fatores indicam que é uma tecnologia que ainda vai crescer muito e aumentar ainda mais sua participação de mercado. Com certeza é algo que vale investir um tempo de estudo e implementação em futuros projetos.


Este post não seria possível sem o trabalho de pesquisa e discussão no time do capítulo de frontend do LuizaLabs.

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. ūüöÄ

Até mais.

Discussion (2)

Collapse
barbosamarlem profile image
Marlem Barbosa

Bacana demais essa parada do SSR , os frameworks cada vez mais pensam em como otimizar tempo de dev e consumo do lado cliente.
Parabéns pelo post.

Collapse
stanley profile image
Stanley Gomes Author

Valeu marlem. Realmente o next veio pra resolver muitos problemas e est√° sendo muito utilizado.

Forem Open with the Forem app