Criando o arquivo Sitemap.xml na estrutura do Next

O lugar ideal para o sitemap é no caminho: www.dominio.com.br/sitemap.xml.

Então, na estrutura do Next, dentro da pasta pages, crie o arquivo sitemap.xml.jsx.

- pages
  - api
  - _app.jsx
  - _document.jsx
  - index.jsx
* - sitemap.xml.jsx

Preparando o arquivo

Nesse arquivo, você pode criar 3 funções.

function generateSiteMap(){
}

function SiteMap(){
}

export async function getServerSideProps({ res }) {
}

export default SiteMap;

Repare que já exportamos a função Sitemap como default.

Gerando o XML

Você deve utilizar a função generateSiteMap para retornar o XML, dessa forma:

function generateSiteMap(){
  return `<?xml version="1.0" encoding="UTF-8"?>
            <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
              <url>
                <loc>https://tavanoblog.com.br/</loc>
              </url>
            </urlset>
  `;           
}

Vale destacar que aqui, criamos um XML apenas com a página principal do domínio, que no exemplo é do Blog.

Para deixá-lo disponível ao Browser, configuramos a função getServerSideProps:

export async function getServerSideProps({ res }) {
    const sitemap = generateSiteMap();

    res.setHeader('Content-Type', 'text/xml');
    res.write(sitemap);
    res.end();

    return {
      props: {},
    }
}

Agora, vamos aprender a torná-lo dinâmico.

Como tornar o Sitemap Dinâmico?

Para tornar o Sitemap Dinâmico, você precisa se adaptar a estrutura da sua aplicação.

No exemplo a seguir, vamos incluir os posts do blog no Sitemap.

export async function getServerSideProps({ res }) {
    const response = await fetch('/api/posts');
    const posts = await response.json();
   
    const sitemap = generateSiteMap(posts);

    res.setHeader('Content-Type', 'text/xml');
    res.write(sitemap);
    res.end();

    return {
      props: {},
    }
}

Fizemos uma requisição para receber a lista de posts e passamos para a função que gera o XML.

Agora, vamos adaptar a função generateSiteMap para receber esses posts.

function generateSiteMap(posts){
  return `<?xml version="1.0" encoding="UTF-8"?>
            <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
              <url>
                <loc>https://tavanoblog.com.br/</loc>
              </url>
              ${posts.map(post => {
               return `<url>
                         <loc>${`https://tavanoblog.com.br/post/${post.id}`}</loc> 
                       </url>`;
              })  
            </urlset>
  `;           
}

Pronto, agora o XML gerado será dinâmico com base nos posts que recebemos da API.

Arquivo Final

function generateSiteMap(posts){
  return `<?xml version="1.0" encoding="UTF-8"?>
            <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
              <url>
                <loc>https://tavanoblog.com.br/</loc>
              </url>
              ${posts.map(post => {
               return `<url>
                         <loc>${`https://tavanoblog.com.br/post/${post.id}`}</loc> 
                       </url>`;
              })  
            </urlset>
  `;           
}

function SiteMap(){

}

export async function getServerSideProps({ res }) {
    const response = await fetch('/api/posts');
    const posts = await response.json();
   
    const sitemap = generateSiteMap(posts);

    res.setHeader('Content-Type', 'text/xml');
    res.write(sitemap);
    res.end();

    return {
      props: {},
    }
}

export default SiteMap;

Como acessar?

Depois do deploy, seu arquivo ficará na rota: www.dominio.com.br/sitemap.xml

Enviando para o Google

Não esqueça de fazer o upload do sitemap no Google Search Console.