O que é Next.js e por que as empresas o escolhem em vez do WordPress

Next.js aparece hoje em quase todas as conversas sobre um novo site empresarial. A agência propõe-o em vez do WordPress, o programador fala sobre "renderização do lado do servidor", e nas ofertas de hosting de repente é preciso procurar por "suporte a Node.js". Neste guia explicamos de forma simples o que é o Next.js, como funciona, para que serve e para que não serve, e o que precisa do servidor. Sem jargões onde for possível evitá-los.

Se estás diante de uma escolha entre duas tecnologias, temos uma comparação separada: WordPress ou Next.js para o site empresarial. Aqui focamo-nos apenas no Next.js.

Índice

1. O que é Next.js numa frase?
2. Em que é que o Next.js difere do React?
3. Como é que o Next.js apresenta páginas? Quatro modos de renderização
4. O que mais vem com o Next.js?
5. Porque é que as empresas escolhem Next.js em vez do WordPress?
6. Quando é que o Next.js não é uma boa ideia?
7. Que tipo de alojamento é necessário para Next.js?
8. Vercel ou servidor próprio?
9. Como lançar Next.js no Saplo passo a passo?
10. FAQ

O que é o Next.js numa frase?

Next.js é um framework gratuito para construir sites e aplicações web, baseado na biblioteca React, que consegue preparar HTML pronto no servidor antes do site chegar ao browser.

É desenvolvido pela empresa Vercel, o código é aberto (licença MIT), e a primeira versão foi lançada em 2016. Hoje, é uma das formas mais populares de escrever sites em JavaScript. Na Saplo instalamos a versão 16.

Um framework é um conjunto de soluções e regras prontas, onde o programador insere o seu próprio código. Não é necessário inventar do zero o routing, o carregamento de dados, a otimização de imagens ou a construção dos ficheiros para produção. O Next.js oferece tudo isto no pacote.

Importante para quem não é técnico: o Next.js não é um sistema de gestão de conteúdos como o WordPress. Não tem um painel onde clicas em "Adicionar entrada". É uma ferramenta para programadores. O conteúdo é fornecido através de ficheiros, de bases de dados ou de um sistema CMS separado (sobre isso falamos mais abaixo).

Em que é que o Next.js difere do React?

O React é uma biblioteca para construir interfaces: botões, formulários, listas, vistas completas. No entanto, por si só, não responde às questões que surgem numa página web verdadeira:

• como organizar subpáginas e URLs,
• onde e quando obter dados,
• como fazer o Google ver o conteúdo e não apenas uma página em branco,
• como construir a versão de produção e lançá-la.

Uma aplicação React clássica (SPA) envia para o navegador um ficheiro HTML quase vazio e um pacote JavaScript. Só depois o navegador monta a página a partir daí. Para o utilizador, isto significa um ecrã branco durante uma fração de segundo ou mais num telemóvel fraco. Para o motor de busca, é trabalho extra, porque o conteúdo aparece apenas depois de executar os scripts.

O Next.js pega no React e adiciona-lhe uma camada de servidor. A página chega ao navegador já preenchida com conteúdo, e os elementos interativos "ganham vida" pouco depois. Daí a sua popularidade em projetos onde o SEO e a rapidez da primeira visualização são importantes.

Como é que o Next.js apresenta as páginas? Quatro modos de renderização

Esta é a coisa mais importante para entender, pois dela depende também a escolha do alojamento. O Next.js permite que cada subpágina escolha uma forma diferente de ser gerada.

Modo	Quando o HTML é gerado	Adequado para
Página estática (SSG)	uma vez, durante a construção do projeto	página inicial, "Sobre nós", oferta, artigos de blog
Renderização no servidor (SSR)	em cada acesso do utilizador	carrinho, painel do cliente, resultados de pesquisa
Atualização incremental (ISR)	uma vez, depois periodicamente em segundo plano	catálogo de produtos, tabela de preços, notícias
Renderização no navegador (CSR)	apenas no utilizador	gráficos, editores, partes após login

Na prática, um website empresarial mistura estes modos. A descrição da empresa é estática e carrega imediatamente. A lista de produtos atualiza-se a cada poucos minutos. O painel do cliente é renderizado sob pedido, pois cada pessoa vê algo diferente.

Desde a versão 13, o Next.js oferece também o chamado App Router e Server Components: componentes que são executados exclusivamente no servidor e não enviam o seu código para o navegador. Menos JavaScript para o utilizador significa páginas mais rápidas, especialmente em telemóveis.

O que mais vem incluído no Next.js?

Para além da renderização, o framework resolve vários problemas comuns que no React puro terias que montar por tua conta:

• Roteamento a partir de ficheiros. A pasta app/oferta/page.js corresponde automaticamente ao endereço /oferta. Sem necessidade de configuração.
• Otimização de imagens. O componente next/image reduz as imagens, serve formatos modernos e só as carrega quando aparecem no ecrã.
• API própria. No mesmo projeto podes escrever endpoints, por exemplo para um formulário de contacto ou um webhook de pagamentos. Não precisas de um backend separado.
• Metadados SEO. Títulos, descrições, etiquetas Open Graph e mapas do site são configurados no código, por página.
• Fontes e scripts. Os mecanismos integrados carregam fontes sem causar "saltos" no texto e atrasam scripts externos.
• Construção rápida. Na versão 16, a ferramenta de construção padrão é o Turbopack, claramente mais rápido que o antigo Webpack.

Porque é que as empresas escolhem Next.js em vez de WordPress?

Habitualmente, surgem quatro argumentos.

1. Velocidade sem adicionar plugins. O WordPress executa PHP e interroga a base de dados a cada acesso, a menos que alguém configure o cache. Uma página estática em Next.js é um ficheiro pronto a usar. Conseguir bons resultados no PageSpeed e Core Web Vitals é mais fácil. As causas da lentidão do WordPress estão explicadas no artigo WordPress lento? 9 causas.

2. Menor superfície de ataque. Não existe o painel /wp-admin, que os bots atacam diariamente, nem dezenas de plugins de diferentes autores. Uma página estática praticamente não tem pontos vulneráveis.

3. Liberdade de design. A página não está limitada por temas ou page builders. Para marcas que querem um aspeto invulgar, animações ou integrações com os seus próprios sistemas, esta é uma grande vantagem.

4. Página e aplicação num só. Se, além de um cartão de visita, precisares de um configurador, calculadora, painel de cliente ou loja com lógica própria, o Next.js suporta isso no mesmo projeto.

O modelo headless está a tornar-se cada vez mais popular: o conteúdo é inserido num painel confortável (por exemplo, Directus, Strapi ou mesmo WordPress usado só como backend), e é apresentado pelo Next.js. A equipa editorial tem o seu painel, e os visitantes recebem uma página rápida. Na Saplo, podes instalar Directus e Next.js lado a lado na mesma Box.

Quando é que o Next.js não é uma boa ideia?

Para ser justo: nem sempre vale a pena. O Next.js perde quando:

• o conteúdo vai ser editado por alguém sem conhecimentos técnicos e o orçamento não inclui um CMS. Sem painel, qualquer alteração no texto é tarefa para um programador,
• precisas de uma funcionalidade típica "para ontem". Reservas, formulários, lojas com métodos de pagamento portugueses e transportadoras existem no WordPress como plugins prontos a usar. No Next.js, isso normalmente requer trabalho de programador,
• não tens ninguém a quem pedir mudanças. Muitas pessoas conseguem lidar com WordPress, muito menos sabem codificar em React,
• o site é apenas um simples cartão de visita sem grandes ambições. Nesse caso, a diferença na velocidade não compensa o custo mais elevado de desenvolvimento.

Uma loja online simples é mais rápido de lançar numa plataforma pronta. Discutimos isto no artigo O que é WooCommerce.

Que tipo de alojamento precisa o Next.js?

Aqui, muitas pessoas ficam surpreendidas. Next.js é uma aplicação Node.js, não um conjunto de ficheiros PHP. Disto resultam dois cenários:

Versão totalmente estática (definição output: 'export'). Next.js gera ficheiros prontos em HTML, CSS e JS. Basta qualquer servidor de ficheiros, até um alojamento comum. No entanto, perdes SSR, ISR, API próprio e a otimização de imagens no servidor.

Versão completa. É necessário um processo Node.js a correr em background, que responde aos pedidos. Para isso, um servidor web à frente (por exemplo nginx), certificado SSL e algo que reinicie o processo em caso de falha ou reinício da máquina. O alojamento partilhado clássico para PHP normalmente não permite isto.

Os requisitos mínimos são modestos. Na nossa fórmula para Next.js adotámos 512 MB RAM e 2 GB de disco por aplicação. Mais memória é útil durante a construção (npm run build) de projetos maiores, pois é nessa altura que o consumo é mais elevado.

Vercel ou servidor próprio?

A Vercel, criadora do Next.js, oferece a sua própria plataforma de alojamento onde o framework funciona "mais nativamente". No entanto, é importante saber duas coisas:

• o plano gratuito Hobby destina-se a uso não comercial. Um site de empresa deve estar num plano pago, faturado por cada membro da equipa,
• com maior tráfego surgem custos adicionais por transferência, chamadas de funções e otimização de imagens, pelo que a fatura cresce com a popularidade do site.

Um servidor próprio ou um contentor oferece um custo fixo e previsível e controlo total sobre os dados (servidores na UE). Em troca, alguém tem de tratar do Node.js, nginx, SSL e reinícios automáticos. O cálculo detalhado dos custos ficará para outro artigo, mas a regra é simples: quanto maior o tráfego e a equipa, mais compensador é um plano fixo.

Como lançar Next.js no Saplo passo a passo?

No Saplo, o Next.js é uma aplicação pronta no catálogo. Não precisas de configurar o servidor: o processo Node.js corre sob supervisão (reinicia sozinho após falha), o nginx direciona o tráfego para ele e o certificado SSL é emitido automaticamente.

Passo 1. Escolhe o plano. Um site em Next.js cabe no Box S (1 GB RAM, 15 GB SSD, 27 € por ano). Se quiseres trabalhar por SSH ou construir projetos maiores, escolhe o Box M (2 GB RAM, 30 GB SSD, 63 € por ano), que já inclui acesso SSH. O preço do primeiro ano é igual ao do renovação. As aplicações e domínios são ilimitados em todos os planos. Compara os planos no cenniku.

Passo 2. Adiciona a aplicação. No painel escolhe do catálogo Next.js. Se ainda não tiveres código, o Saplo criará um projeto inicial (create-next-app), vai construí-lo e lançá-lo para veres logo a página em funcionamento.

Passo 3. Liga o endereço. Inicialmente recebes uma subdomínio *.saploapp.pl com SSL. O teu domínio próprio adiciona-se no painel e configuram-se os registos DNS seguindo as instruções.

Passo 4. Envia o teu código por Git. Gera o ficheiro de configuração com o comando saplo init, adiciona-o ao repositório e liga o repositório GitHub nos detalhes da aplicação (aplicação “Saplo Deploy”). A partir daí, cada git push para a ramificação de produção (por defeito main) desencadeia um automático npm install, construção e reinício. Normalmente demora entre 1 a 3 minutos e o resultado aparece como ponto verde ou vermelho no commit no GitHub. Podes consultar os detalhes em dokumentacji Git Deploy.

Passo 5. Variáveis de ambiente. Coloca chaves API, endereços de bases e segredos no painel como variáveis, não no código do repositório.

Já tens um site em Next.js no Vercel ou noutro servidor? A migração para Saplo está incluída no preço de todos os planos.

Perguntas frequentes

O Next.js é gratuito?

Sim. O Next.js é um software open source com licença MIT e podes usá-lo comercialmente sem custos. Apenas pagas pelo alojamento onde o site está hospedado.

O Next.js é bom para SEO?

Sim, esta é uma das suas principais vantagens. Graças à geração de HTML no servidor ou durante a construção, o motor de busca recebe imediatamente o conteúdo completo, e o carregamento rápido ajuda nos Core Web Vitals. No entanto, o próprio framework não substitui bons conteúdos nem metadados corretos.

Preciso de conhecer React para usar o Next.js?

Para construir o site, sim, porque o Next.js é React com extras. Para usar um site já feito, não: se os conteúdos vêm do painel CMS, a equipa editorial não mexe em código.

O Next.js funciona numa simple hospedagem partilhada?

Só como exportação estática, sem renderização no servidor, ISR e API própria. A versão completa requer um processo Node.js a funcionar, ou seja, um servidor, um contentor ou uma plataforma que o execute. Na Saplo, cada Box é um contentor separado, onde o Next.js funciona na sua versão completa.

Quanta memória RAM precisa o Next.js?

Um site pequeno ou médio funciona com cerca de 512 MB de memória. A maior parte dos recursos é consumida durante a construção do projeto, por isso, em aplicações grandes, é recomendável ter uma reserva, por exemplo o Box M com 2 GB de RAM.