Se você estiver construindo um site com Next.js, provavelmente desejará que os mecanismos de pesquisa descubram e indexem suas páginas com eficiência. Uma maneira de melhorar esse processo é criando um mapa do site. Um sitemap é um arquivo que lista todos os URLs do seu site, ajudando mecanismos de pesquisa como o Google a rastrear e indexar seu site com mais rapidez.

Neste guia, veremos como instalar e configurar o next-sitemap em um projeto Next.js. Também abordaremos os benefícios de ter um mapa do site e incluiremos um código de exemplo com um aplicativo Next.js "Hello World" para ilustrar como ele funciona.

Benefícios de usar o próximo sitemap

Antes de mergulharmos no processo de instalação, vamos discutir brevemente os principais benefícios do uso do next-sitemap:

1. SEO aprimorado: um mapa do site bem estruturado ajuda mecanismos de pesquisa como o Google a descobrir suas páginas com mais eficiência, levando a uma melhor indexação e classificações de pesquisa potencialmente mais altas.

2. Rastreamento mais rápido: ao fornecer aos mecanismos de pesquisa um roteiro do seu site, você permite que eles rastreiem e indexem suas páginas com mais rapidez.

3. Tratamento de rotas dinâmicas: para sites com rotas dinâmicas, o next-sitemap facilita a geração de URLs para conteúdo dinâmico, garantindo que todas as suas páginas sejam detectáveis.

4. Sitemaps personalizados: next-sitemap permite que você personalize seus sitemaps com opções como definir prioridade, frequência de alteração e até mesmo excluir determinadas páginas.

Etapa 1: instalar o próximo mapa do site

Para começar, você precisará instalar o pacote next-sitemap em seu projeto Next.js. Execute o seguinte comando em seu terminal:

npm install next-sitemap

Ou, se você estiver usando Yarn:

yarn add next-sitemap

Etapa 2: Criar arquivo de configuração next-sitemap.js

Depois de instalar o pacote, a próxima etapa é criar um arquivo de configuração chamado next-sitemap.config.js na raiz do seu projeto. Este arquivo conterá configurações para gerar seu mapa do site.

Aqui está uma configuração básica:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
  generateRobotsTxt: true, // (Optional) Generates a robots.txt file
  sitemapSize: 7000, // Number of URLs per sitemap file
}

No código acima, especificamos o URL base do seu site usando siteUrl. A opção generateRobotsTxt gera um arquivo robots.txt junto com o mapa do site, e sitemapSize determina o número de URLs a serem incluídos em cada arquivo de mapa do site.

Etapa 3: atualize package.json com Sitemap Script

Agora, você precisará adicionar um script ao seu arquivo package.json para gerar o mapa do site sempre que construir seu projeto.

Veja como fazer isso:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

Isso garantirá que, após cada construção, o mapa do site seja gerado automaticamente com base na sua configuração.

Etapa 4: construir e gerar o mapa do site

Agora que tudo está configurado, execute o seguinte comando para construir seu projeto e gerar o mapa do site:

npm run build

Ou com fio:

yarn build

Após a conclusão da construção, um arquivo sitemap.xml (e opcionalmente um arquivo robots.txt) será gerado na pasta public/ do seu projeto. Esses arquivos conterão todos os URLs do seu aplicativo Next.js, prontos para serem rastreados pelos mecanismos de pesquisa.

Exemplo: aplicativo Next.js "Hello World" com next-sitemap

Para demonstrar como funciona o next-sitemap, vamos criar um aplicativo Next.js simples "Hello World". Aqui está uma página básica do Next.js:

// pages/index.js
export default function Home() {
  return (
    

      
Hello World
      
Welcome to my Next.js app!
    
  );
}

Agora, configure seu next-sitemap.config.js assim:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

Em seguida, adicione o seguinte ao seu package.json:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

Depois de executar o npm run build, você encontrará o mapa do seu site no diretório public/, contendo o URL da sua página inicial "Hello World".

Demonstração ao vivo

Meu site https://rajeshkumaryadav.com está usando este pacote para gerar automaticamente o mapa do site no processo de construção. Abaixo está o robot.txt que contém sitemap.xml

https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml

Conclusão

Seguindo as etapas descritas neste guia, você integrou o next-sitemap em seu projeto Next.js. Esta ferramenta fornece uma maneira fácil de gerar um mapa do site e um arquivo robots.txt, o que pode melhorar significativamente o SEO do seu site e garantir que os mecanismos de pesquisa possam descobrir com eficiência todo o seu conteúdo.

Com esta configuração, você está no caminho certo para tornar seu aplicativo Next.js mais amigável aos mecanismos de pesquisa e melhor indexado!