Aprenda a gerar um sitemap dinâmico usando Next.js 14

Se você possui um site ou aplicativo desenvolvido em Next.js e deseja garantir que ele seja indexado pelo Google ou outros motores de busca, é crucial ter um sitemap disponível em sua aplicação. Se já acessou o seu Search Console, provavelmente está ciente disso.

Isso não deve ser segredo para você. No entanto, se está enfrentando dificuldades na geração dinâmica das URLs do sitemap em um aplicativo Next.js, você está no lugar certo! Vou mostrar um exemplo prático de geração dinâmica de um sitemap para um blog, onde os artigos serão buscados através de um fetch e, em seguida, vamos popular o sitemap com o resultado desse fetch. Vamos lá!

Adicionando sitemap dinâmico para versões Next 13/14+

Considerando que você já tenha uma aplicação com o Next 14 instalado e configurado em sua máquina, vamos gerar um arquivo sitemap.ts dentro da sua pasta app.

Após isso, vamos inserir o seguinte trecho de código, que será um função onde retornará uma lista com dois objetos estáticos:

import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
    return [
        {
            url: 'https://www.meudominio.com.br',
            lastModified: new Date(),
            changeFrequency: 'monthly',
            priority: 1
        },
        {
            url: `https://www.meudominio.com.br/blog`,
            lastModified: new Date(),
            changeFrequency: 'monthly',
            priority: 0.5
        }
    ];
}

Ao ativar seu servidor de desenvolvimento com yarn dev, você verá que seu sitemap já estará acessível em http://localhost:3000/sitemap.xml.

O Next.js formata o XML corretamente para nós, pois a função padrão exportada em sitemap.(xml|ts|js) realiza todo o processo de construção do XML. O Next.js facilita essa implementação usando suas API Routes e manipulação de formato XML integrada.

Agora, vamos tornar nosso sitemap dinâmico. Vamos simular um fetch buscando todos os artigos do nosso blog e populá-los no sitemap. Não há segredo, vamos apenas transformar nossa função em um função assíncrona. Antes de retornar a estrutura de sitemap, vamos inserir o resultado do fetch no retorno da função, como é feito no código abaixo:

import { MetadataRoute } from 'next';
import { config } from '@/config/general';
import { ArticleService } from '@/services/articles';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
    const articles = (await ArticleService.getAllSlugs()) || [];
    const sitemapArticles = articles.map((article) => {
        return {
            url: `${config.urls.base}/blog/${article.slug}`,
            lastModified: new Date(article._updatedAt),
            changeFrequency: 'monthly',
            priority: 0.5
        };
    }) as MetadataRoute.Sitemap;

    return [
        {
            url: config.urls.base,
            lastModified: new Date(),
            changeFrequency: 'monthly',
            priority: 1
        },
        {
            url: `${config.urls.base}/blog`,
            lastModified: new Date(),
            changeFrequency: 'monthly',
            priority: 0.5
        },
        ...sitemapArticles
    ];
}

Nesse exemplo, tenho um serviço que busca todos os slugs dos artigos em minha aplicação. Em seguida, formato o resultado e incorporo no retorno do meu sitemap.

Agora, se acessarmos outra vez http://localhost:3000/sitemap.xml, podemos ver essa incorporação. Meu sitemap.xml ficou dessa forma:

<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">
	<url>
		<loc><http://localhost:3000></loc>
		<lastmod>2024-02-11T15:33:29.554Z</lastmod>
		<changefreq>monthly</changefreq>
		<priority>1</priority>
	</url>
	<url>
		<loc><http://localhost:3000/blog></loc>
		<lastmod>2024-02-11T15:33:29.554Z</lastmod>
		<changefreq>monthly</changefreq>
		<priority>0.5</priority>
	</url>
	<url>
		<loc><http://localhost:3000/blog/o-que-e-pwa-e-quais-sao-suas-principais-caracteristicas></loc>
		<lastmod>2024-02-10T22:48:10.000Z</lastmod>
		<changefreq>monthly</changefreq>
		<priority>0.5</priority>
	</url>
	<url>
		<loc><http://localhost:3000/blog/descubra-os-10-easter-eggs-mais-iconicos-do-google></loc>
		<lastmod>2024-02-10T21:04:11.000Z</lastmod>
		<changefreq>monthly</changefreq>
		<priority>0.5</priority>
	</url>
</urlset>

Também podemos criar diversos arquivos sitemaps em nossa aplicação, para isso podemos usar a função generateSitemaps. Não entrarei em detalhes dessa função, mas você pode aprender mais acessando a documentação oficial do next: https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps.