Como criar um sitemap Dinâmico com Next.JS

Published in

Printi Tech

4 min readJun 7, 2022

Nesse artigo, vou mostrar como gerar um sitemap (mapa do site) para seu site ou aplicativo Next.js dinamicamente e melhorar a capacidade de descoberta, ou seja, o SEO do seu site para mecanismos de pesquisa.

Vamos fazer nosso sitemap em cima de um projetinho simples desenvolvido por mim, link abaixo e nas referências. 😁

Ele tem 3 páginas ao todo:

Home
Animes
Anime

👉 Repositório
👉 Preview

👉 Meu vídeo tutorial

Curiosidades 🤔

O que é SEO?

SEO é a sigla de Search Engine Optimization (otimização para mecanismos de busca) e é o conjunto de técnicas usadas, geralmente divididas entre tecnologia, conteúdo e autoridade, para alcançar bom posicionamento de páginas de um site no Google e em outros buscadores, gerando tráfego orgânico.

O que é Sitemap?

Sitemap é um arquivo que esclarece aos buscadores, como o Google, a estrutura de um site, bem como suas atualizações e as principais páginas do site a serem indexadas. Geralmente ele é criado e utilizado no formato XML.

Bora Codar! 🔥

Vou usar de base o mesmo projeto feito também no vídeo acima (link também nas referências hehe).

Pré-requisitos:

Node/NPM
Yarn (opcional, mas recomendado)
Git

Configurando o ambiente 1️⃣

Primeiro passo é dar clone no projeto:

git clone https://github.com/miguelrisquelme/sitemap-anime

Após isso vamos mudar para a branch para fazer o sitemap:

git checkout starter

Agora vamos instalar as dependências

yarnounpm i

Caso queira rodar a aplicação, execute este comando

yarn devounpm run dev

Criando o Sitemap 2️⃣

Crie um arquivo chamado sitemap.xml.tsx dentro da pasta pages

|..../pages
|......./animes
|......._app.tsx
|.......index.tsx
|.......sitemap.xml.tsx

No inicio do arquivo vamos fazer as importações

Após nossas importações vamos declarar nosso componente Sitemap e também criar nossa função getServerSideProps do Next

Dentro da nossa função getServerSideProps, vamos declarar algumas constantes, lembrando que a baseUrl pode vir do seu arquivo .env ou pode deixar estática como eu fiz, eu usei a do meu projeto que está em live, mas pode usar a que você quiser ai ✌

Fizemos também a request para uma API de animes que eu utilizei, neste caso ela está retornando para a gente um array de strings.. [‘anime 1’, ‘anime2', …]

Agora eu vou pegar todas as nossas páginas estáticas, ou seja páginas que criamos no projeto mesmo, arquivos ts, js, tsx, jsx para servirem de página no nosso projeto

Eu utilizo a biblioteca file system do node para ler o diretório e no final eu formato cada arquivo que o fs me retorna e adiciono o nome da página após a minha baseUrl

Vamos listar as páginas dinâmicas agora, pegamos nosso array de animes e formatamos ele junto com a nossa baseUrl 👌, temos algumas formatações para codificar entities HTML, mas é devido a própria resposta da API conter alguns caracteres que não serem ser lidos no xml, bem especifico deste projeto 🤗

Agora só juntar nossas duas listas de páginas em uma só e listar na tela hehe, ai ja moldamos nosso xml, listando cada url na tag loc, adicionando um lastmod e outras configurações comuns de terem nos sitemaps 😊

Por fim, enviamos um Header para identificar que o conteúdo do nosso sitemap é um xml e escrevemos ele na tela, e finalizamos

O arquivo completo você pode encontrar na branch without-library ou neste link:

👉 Arquivo completo

Considerações Finais 🙌

Essa com certeza não é a única forma de se fazer um sitemap dinâmico, mas é a maneira em que você não vai precisar instalar nada, e muito menos rodar algum comando para gerar o seu sitemap. Então vai ser uma página como qualquer outra que é gerada automaticamente por trás dos panos, ou seja, pelo servidor, nada de request ou log vai ser registrado pelo cliente graças a essa feature incrível que o Next nos proporciona.