Next.js é um framework do React.js, criado e desenvolvido pela Vercel, que tem como um dos seus principais objetivos auxiliar na indexação da página pelo motor de busca e melhorar o SEO (Search Engine Optimization), consequentemente, melhorando também seu ranqueamento.

O Next.js faz isso através de diversas estratégias, sendo as mais conhecidas e aplicadas: Server-side rendering (SSR) e Static Site Generation (SSG). Além disso, diversas outras técnicas podem ser utilizadas para facilitar a indexação e o posicionamento da página. Neste artigo, iremos abordar algumas dessas estratégia.

O que é SEO?

Antes de falarmos sobre boas práticas, precisamos entender: o que é SEO?

Podemos entender SEO (em português, otimização para motores de busca) como um conjunto de técnicas que tem por finalidade melhorar a posição do seu produto (pode ser entendido como postagem, site, vídeo, entre outros) em algum mecanismo de busca (como Google ou Youtube). Pensando nisso, vamos descobrir a seguir quais são essas técnicas utilizadas pelo framework Next.

Server Side Rendering (SSR)

Em português, renderização do lado do servidor, o SSR surge como uma ótima estratégia para realizar a otimização de sites. A partir da pré-renderização dos componentes HTML da página, o buscador consegue visualizar e entender do que aquele site fala sem precisar do arquivo Javascript.

Dessa forma, essa funcionalidade corrige um dos maiores problemas do React, que precisava ter seu Javascript executado para visualizar o arquivo HTML completo.

Como aplicar o SSR em projetos

Para entendermos melhor como essa funcionalidade é utilizada, vamos exemplificar com um simples caso de uso (uma página cars que recebe e consome dados fictícios).

Instalação com NPX no terminal

$ npx create-next-app myapp

Dentro do aplicativo next

Agora, vamos criar uma página chamada cars dentro da pasta pages.

A página vai receber como props o nome da marca de vários carros e vai renderizá-los na tela.

Inserindo o SSR

Para isso, criaremos uma função chamada getServerSideProps. Ela será responsável por obter os dados necessários (da API, do JSON) e mandar para o componente renderizar.

Dessa forma, o HTML será pré-renderizado do lado do servidor e o SEO irá melhorar bastante!

Static Site Generation (SSG)

Em português, geração de site estático, o SSG surge como uma ótima estratégia para realizar a otimização de sites pequenos, ou de páginas específicas que não possuem mudanças constantes.

Enquanto o SSR é realizado no momento da requisição, o SSG acontece em tempo de compilação. Ou seja, isso afeta o tempo de carregamento da página, tornando o método útil apenas para situações específicas (como mencionado anteriormente).

Como aplicar o SSG em projetos

Seguindo a mesma linha de raciocínio empregada anteriormente na página cars, podemos substituir o getServerSideProps, pelo getStaticProps.

Da mesma maneira que o SSR, agora essa página será pré-renderizada e os motores de busca irão indexar ela mais facilmente, além de conquistar um melhor ranqueamento.

Outros métodos para melhorar o SEO

Além do que foi apresentado anteriormente, o Next disponibiliza outras técnicas para melhorar ainda mais a otimização da página, como veremos a seguir.

Título e descrição da página

Cada página possui um título e uma descrição. Isto é, pode ser desde uma postagem de blog que vai explicar algo até um produto em um e-commerce. Sem esses metadados, não temos como saber do que se trata aquela página. Se até mesmo nós temos dificuldade de entender aquele conteúdo, imagina o mecanismo de busca!?

Sendo assim, podemos combater essa falha utilizando um cabeçalho e passando para ele o título e a descrição da página. Vamos tomar o exemplo da página que criamos anteriormente:

Podemos passar essa propriedade em todas as páginas necessárias de nossa aplicação e irá melhorar a posição dela no motor de busca.

Criando o _document

Com o _document, podemos inserir definições padrões do nosso arquivo HTML, como a linguagem padrão (inglês, português, etc). Para isso, vamos criar ele dentro da pages.

Agora, vamos configurá-lo para definir a linguagem padrão como inglês.

Otimizando imagens

Por fim, vamos falar um pouco sobre a otimização de imagens! Ao invés de utilizar a tag img disponibilizada pelo HTML padrão, o Next.js disponibiliza uma tag customizada para exibir imagens em nossa página.

Lembre-se: ao utilizar imagens, sempre dê preferência por arquivos .svg. Isso porque são mais fáceis de serem manipulados. E não se esqueça de passar o tamanho da imagem no CSS!

Conclusão

Aplicando essas estratégias, além de seu código ficar mais organizado, estará melhorando o SEO e, consequentemente, o posicionamento das suas páginas no motor de busca.

Leia também:

TypeScript: quando utilizar Alias ou Interface?

Autor: Carlos César Feitosa.