Next.js: o que é e para que serve?

Para entender o Next.js, é importante compreender a evolução do processo de criação de sites e aplicações para Web.

Era das páginas estáticas (HTML, CSS e olhe lá 🤣)

No início da web, os sites eram simples documentos HTML estáticos servidos por um servidor. O conteúdo era fixo e qualquer alteração exigia edição manual dos arquivos.

Imagine um mundo onde para criar um site, você precisa criar todos os arquivos html na mão, e os usuários acessavam direto esses arquivos ao navegar. Era dessa forma que criávamos site no passado.

Era das páginas dinâmicas (PHP, ASP, JSP, etc.)

O cenário descrito acima, gerava um grande problema na medida que a Web crescia, e tínhamos sites mais complexos. Por exemplo, como criar um site que seria um album de fotos, onde teríamos um índice, e ao clicar, o usuário poderia visualizar a foto no detalhe (igual temos em qualquer rede social hoje em dia)?

Para fazer isso, usando apenas HTML, tínhamos que criar documentos HTML separados para cada página. Um para o índice, e um para cada uma das fotos. Imagina um cenário de um site com 200 fotos pra exibir.

Dessa forma, a partir desse problema, começaram a surgir linguagens capazes de gerar HTML a partir de um código-fonte mais estruturado. Algumas das mais famosas na época, foram o ASP.net, o PHP, e o JSP.

O surgimento dessas linguagens levou a criação de sites para um novo patamar.

Era do Javascript

Após o surgimento dessas linguagens Web do lado servidor, e a possibilitade de criar de fato, aplicações para a Internet, logo surgiu um problema de experiência, pois a cada interação do usuário com a aplicação, era necessário um novo carregamento da página, para que o seu script PHP, ASP etc, pudesse fazer o seu trabalho.

Imagine o seguinte cenário:

• Você cria um site para os clientes enviarem fotos para divulgarem para os amigos (o famoso Flogão 😀😺)
• Nele você disponibiliza um formulário de cadastro, o usuário digita email e senha, clicar em “enviar”, a página recarrega e dá um erro de “email inválido” por exemplo, pois ele não colocou o “.com” no email.
• Todo esse processo, além de ser uma experiência ruim para o usuário, gera uma sobrecarga desnecessária no seu servidor, pois isso é algo que poderia facilmente ser detectado no próprio computador do cliente.

Foi aí que começaram a surgir as tecnologias capazes de executar algo já no lado cliente, ou seja, no próprio navegador do usuário. Apesar de terem existido algumas outras linguagens com esse propósito, a mais famosa, e que permanece até hoje, é o todo poderoso Javascript.

Surge o Javascript

O Javascript, que surgiu inicialmente com esse propósito (validar formulários no browser), foi ganhando cada vez mais relevância e peso dentro do processo de desenvolvimento Web, até chegarmos no ponto onde passamos a ter sites feitos inteiros com ele.

Esses sites, passaram a ser conhecidos como Single Page Applications (SPAs), pois no servidor, você só precisava ter uma única página HTML, que incluía um arquivo javascript, e pronto, toda a sua aplicação já estaria funcional a partir dali.

O surgimento de frameworks javascript como React, Angular foi essencial para esse cenário de podermos ter uma aplicação complexa, mas suficientemente organizada para ser construída inteira em Javascript.

SEO e Server Side Rendering (SSR)

Um grande problema que surgiu com as SPAs, foi o impacto negativo no SEO dos sites criados dessa forma.

Como nesse tipo de aplicação, na prática, o servidor retorna uma página vazia, e o conteúdo é criado dinamicamente no browser do cliente, isso gera uma dificuldade e custo maior para os sites de busca conseguirem coletar o conteúdo, dado que eles fazem isso de forma automatizada.

Não é que seja impossível, simular um browser e executar o código javascript nesse processo, mas é difícil/custoso a ponto de até mesmo o Google ter problemas para fazer.

O resultado, foi que sites construídos como SPAs, acabavam tendo uma performance pior no rankeamento dos sites de busca como o Google, e sabe como é, se seu site não tá no Google, ele não existe.

Para resolver esse problema, foram desenvolvidas formas de realizar uma pré-renderização dessas SPAs já no servidor, fazendo com que o primeiro carregamento da página, ao invés de vir um html vazio, já trouxesse o conteúdo da página renderizado.

E é nesse contexto que surge o Next.js, que é um framework que possibilita criar uma aplicação em react, e tem foco direto em eficiência, e produção, incluindo por padrão o suporte ao SSR nos projetos criados com ele.

O que é Next.js?

Next.js é um framework de desenvolvimento web baseado em react que facilita a criação de aplicações modernas, otimizadas e escaláveis. Desenvolvido pela Vercel, ele oferece uma série de recursos prontos para uso, como renderização no servidor (SSR), geração estática (SSG), rotas automáticas, otimização de imagens e muito mais.

Diferente do React puro, que é uma biblioteca para construção de interfaces de usuário, o Next.js adiciona funcionalidades que melhoram o desempenho, a experiência do desenvolvedor e a facilidade de implantação.

Para que serve o Next.js?

Next.js é utilizado principalmente para construir aplicações web rápidas e eficientes, incluindo:

• Sites institucionais e blogs: Com suporte à geração estática, sites podem ser entregues como arquivos HTML prontos, melhorando o desempenho e o SEO.
• E-commerce: Garante um carregamento rápido, essencial para conversões e SEO.
• Aplicativos web (SaaS): Oferece uma estrutura bem organizada e eficiente para construir sistemas complexos.
• Painéis administrativos: Garante uma experiência fluida com renderização híbrida.

Quando usar o Next.js?

Faz sentido usar quando:

• É necessário um bom desempenho e SEO, pois o Next.js permite renderizar páginas no servidor ou gerá-las estaticamente.
• O projeto exige carregamento rápido, como em e-commerces e landing pages.
• Há necessidade de renderização dinâmica, que melhora a experiência do usuário ao evitar carregamentos pesados no navegador.
• Deseja-se um ambiente de desenvolvimento produtivo, com suporte a TypeScript, APIs prontas e otimização automática de imagens.

Não faz sentido usar quando:

• O projeto é uma aplicação pequena e estática, onde um site HTML puro ou um gerador de sites estáticos como Astro pode ser mais eficiente.
• Há restrições de hospedagem, pois o Next.js é otimizado para ambientes serverless ou com suporte a Node.js.
• O desenvolvedor quer apenas uma SPA simples, sem necessidade de SSR ou otimizações.

O que é preciso saber antes de usar Next.js?

Antes de começar com Next.js, é importante ter conhecimento em:

• JavaScript e ES6+: Conceitos modernos da linguagem.
• React.js: Next.js é baseado em React, então é essencial conhecer componentes, props e estado.
• HTML e CSS: Para estilização e estrutura das páginas.
• Node.js e npm/yarn: Para instalação de dependências e execução do projeto.

Por onde começar com Next.js?

Não vamos nos aprofundar nesse artigo sobre os detalhes de como usar o Next.js para criar uma aplicação nova. Vamos abordar esse assunto num artigo futuro.

Por hora, podemos dizer que para criar sua aplicação com next.js, é tão simples quanto rodar o comando abaixo:

$ npx create-next-app@latest

O comando vai fazer algumas perguntas, que você pode apenas usar as respostas padrão, e pronto, seu projeto vai estar criado.

Para executar a aplicação, basta rodar o comando npm run dev e você já deve conseguir acessar seu projeto rodando no endereço localhost:3000.

Mais detalhes de como criar sua aplicação com Next.js, você encontra aqui na documentação oficial.

Conclusão

Next.js é uma ferramenta poderosa para quem deseja criar aplicações web eficientes e otimizadas. Se você busca melhorar o SEO, a performance e ter uma estrutura robusta para desenvolvimento, Next.js é uma excelente opção. Comece explorando a documentação oficial e criando seu primeiro projeto para entender melhor seu potencial!

Andrew Cavalcante Pacífico

Bacharel em Ciência da Computação pela Universidade Federal do Amazonas, MBA em Gerenciamento de Projetos pela Fundação Getúlio Vargas.

Atualmente trabalha como Gerente de Engenharia na Meliuz.

Com 20 anos de experiência na área, já trabalhou com um pouco de tudo, C, C++, Java, C#, Delphi, Node.js, AWS, PHP, Python, React, Angular, jQuery, e mais um monte de coisa que nem existe mais 😀

andrewpacifico.com

Artigos relacionados:

SearchParams no Next.js 15: Como usar parâmetros da URL Removendo arquivos duplicados do HD com node js Guia Completo: Configurando Sua Primeira Suíte de Testes com Jest O que é node js? Criando seu primeiro projeto O que é NVM? Guia Completo do Node Version Manager Lançamento do Node.js 20.18.0: Novas Funcionalidades e Melhorias