Comment installer et utiliser « next-sitemap » dans une application Next.js : un guide étape par étape

Si vous créez un site Web avec Next.js, vous souhaitez probablement que les moteurs de recherche découvrent et indexent efficacement vos pages. Une façon d’améliorer ce processus consiste à créer un plan du site. Un plan de site est un fichier qui répertorie toutes les URL de votre site Web, aidant ainsi les moteurs de recherche comme Google à explorer et indexer votre site plus rapidement.

Dans ce guide, nous expliquerons comment installer et configurer le plan du site suivant dans un projet Next.js. Nous aborderons également les avantages d'avoir un plan de site et inclurons un exemple de code avec une application Next.js "Hello World" pour illustrer son fonctionnement.

Avantages de l'utilisation du plan du site suivant

Avant de plonger dans le processus d'installation, discutons brièvement des principaux avantages de l'utilisation du plan du site suivant :

1. Référencement amélioré : un plan de site bien structuré aide les moteurs de recherche comme Google à découvrir vos pages plus efficacement, ce qui conduit à une meilleure indexation et à un classement de recherche potentiellement plus élevé.

2. Exploration plus rapide : En fournissant aux moteurs de recherche une feuille de route de votre site Web, vous leur permettez d'explorer et d'indexer vos pages plus rapidement.

3. Gestion des itinéraires dynamiques : pour les sites Web dotés d'itinéraires dynamiques, le plan du site suivant facilite la génération d'URL pour le contenu dynamique, garantissant ainsi que toutes vos pages sont visibles.

4. Plans de site personnalisés : le plan du site suivant vous permet de personnaliser vos plans de site avec des options telles que définir la priorité, modifier la fréquence et même exclure certaines pages.

Étape 1 : Installer le plan du site suivant

Pour commencer, vous devrez installer le package next-sitemap dans votre projet Next.js. Exécutez la commande suivante dans votre terminal :

npm install next-sitemap

Ou, si vous utilisez Yarn :

yarn add next-sitemap

Étape 2 : Créer le fichier de configuration next-sitemap.js

Après avoir installé le package, l'étape suivante consiste à créer un fichier de configuration nommé next-sitemap.config.js à la racine de votre projet. Ce fichier contiendra les paramètres de génération de votre plan de site.

Voici une configuration de base :

// 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
}

Dans le code ci-dessus, nous spécifions l'URL de base de votre site à l'aide de siteUrl. L'option generateRobotsTxt génère un fichier robots.txt à côté du plan du site, et sitemapSize détermine le nombre d'URL à inclure dans chaque fichier de plan du site.

Étape 3 : Mettre à jour package.json avec le script Sitemap

Maintenant, vous devrez ajouter un script à votre fichier package.json pour générer le plan du site chaque fois que vous construisez votre projet.

Voici comment procéder :

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

Cela garantira qu'après chaque build, le plan du site est automatiquement généré en fonction de votre configuration.

Étape 4 : Créer et générer le plan du site

Maintenant que tout est configuré, exécutez la commande suivante pour construire votre projet et générer le plan du site :

npm run build

Ou avec du fil :

yarn build

Une fois la construction terminée, un fichier sitemap.xml (et éventuellement un fichier robots.txt) sera généré dans le dossier public/ de votre projet. Ces fichiers contiendront toutes les URL de votre application Next.js, prêtes à être explorées par les moteurs de recherche.

Exemple : application Next.js "Hello World" avec plan du site suivant

Pour démontrer le fonctionnement du plan du site suivant, créons une simple application Next.js « Hello World ». Voici une page Next.js de base :

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Welcome to my Next.js app!</p>
    </div>
  );
}

Maintenant, configurez votre next-sitemap.config.js comme ceci :

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

Ensuite, ajoutez ce qui suit à votre package.json :

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

Après avoir exécuté npm run build, vous trouverez votre plan de site dans le répertoire public/, contenant l'URL de votre page d'accueil "Hello World".

Démo en direct

Mon site Web https://rajeshkumaryadav.com utilise ce package pour générer automatiquement le plan du site lors du processus de construction. Ci-dessous se trouve le robot.txt qui contient sitemap.xml

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

Conclusion

En suivant les étapes décrites dans ce guide, vous avez maintenant intégré le plan du site suivant dans votre projet Next.js. Cet outil offre un moyen simple de générer un plan du site et un fichier robots.txt, ce qui peut améliorer considérablement le référencement de votre site Web et garantir que les moteurs de recherche peuvent découvrir efficacement tout votre contenu.

Avec cette configuration, vous êtes sur la bonne voie pour rendre votre application Next.js plus conviviale pour les moteurs de recherche et mieux indexée !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!