Comment ajouter un sitemap sur un site NextJS ?

Article publié le mercredi 23 août 2023 et mis à jour le samedi 20 janvier 2024.

Comment ajouter un sitemap sur un site NextJS ?

Comment ajouter un sitemap sur votre site NextJS que vous utilisiez le App Router ou le Pages Router ?

Découvrez tout sur la construction de sitemaps dans cet article !

Pour ajouter un sitemap statique à votre projet Next, vous pouvez simplement créer un fichier sitemap.xml classique :

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>http://www.commentcoder.com/</loc>
      <lastmod>2020-05-19</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
   </url>
</urlset>

Si en revanche vous avez besoin d’une solution dynamique qui va chercher vos articles de blogs sur un serveur ou bien en explorant la structure de vos fichiers, alors je vous explique comment faire pour toutes les versions de NextJS.

Commençons sans plus tarder avec le cas le plus fréquent si vous avez un nouveau projet avec NextJS.

Comment ajouter un sitemap au App Router ?

Il est possible d’utiliser le nouveau paradigme de routes App Router depuis la version 13 de Next.JS.

Si vous avez déjà utilisé Next par le passé, vous vous rappelez peut-être du fait qu’on avait un dossier /pages avec toutes nos routes. C’est ce qu’on appelle le Pages Router et je vous donne le sitemap pour plus bas de cet article.

Depuis Next 13, on utilise l’App Router qui possède un dossier /app avec des fichiers /page.js dans chacun d’entres-eux.

Plus d’informations sur le nouveau paradigme de Next JS sur les explications de l’App Router sur le site officiel de NextJS.

Voyons maintenant comment ajouter un sitemap à Next JS 13+ en utilisant l’App Router.

Ajouter un sitemap à NextJS 13.3+

Si vous venez de créer un projet avec la dernière version de NextJS, alors c’est ce sitemap qu’il vous faut.

Il faudra créer un fichier sitemap.js dans votre dossier app et retourner une liste d’url dans une fonction sitemap.

// app/sitemap.js

// L'URL de votre site
const URL = "https://www.commentcoder.com"

// Vos routes statiques
const SITE_ROUTES = ["", "/blog", "/newsletter", "/a-propos", "/ressources"]

// Vos routes dynamiques
// Ici, on utilisera plus souvent le résultat d'un call API
// ou bien une fonction qui va récupérer les chemins de vos pages
const getBlogPosts = () => {
  return [{ slug: "nextjs-sitemap", date: "2023-08-23T08:42:00.284Z" }]
}

export default async function sitemap() {
  const posts = BLOG_POSTS.map(({ slug, date }) => ({
    url: `${URL}/blog/${slug}`,
    lastModified: date,
  }))

  const routes = SITE_ROUTES.map(route => ({
    url: `${URL}${route}`,
    lastModified: new Date().toISOString(),
  }))

  return [...routes, ...posts]
}

Ajouter un sitemap à NextJS 13.2 ou moins

Si vous utilisez la version 13.0, 13.1 ou 13.2 de NextJS, je vous conseille de mettre votre projet à jour en 13.3+ pour pouvoir utiliser le sitemap vu juste au dessus.

Sinon, vous devrez créer un fichier route.js dans un dossier sitemap.xml dans votre dossier app qui ressemble plus ou moins au code ci-dessous.

// app/sitemap.xml/route.js

import { getBlogPosts } from "../helpers"

const URL = "https://www.commentcoder.com"

function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>${URL}</loc>
     </url>
     <url>
       <loc>${URL}/newsletter</loc>
     </url>
      <url>
       <loc>${URL}/a-propos</loc>
     </url>
     <url>
       <loc>${URL}/ressources</loc>
     </url>
     ${posts
       .map(({ slug }) => {
         return `
           <url>
               <loc>${`${URL}/blog/${slug}`}</loc>
           </url>
         `
       })
       .join("")}
   </urlset>
 `
}

export function GET() {
  const posts = getSortedPostsData()
  const body = generateSiteMap(posts)

  return new Response(body, {
    status: 200,
    headers: {
      "Cache-control": "public, s-maxage=604800, stale-while-revalidate",
      "content-type": "application/xml",
    },
  })
}

Comment ajouter un sitemap au Pages Router ?

Pour ajouter un sitemap à un projet NextJS avec une version inférieure à la version 13 et qui utilise le Pages Router, on peut créer un fichier sitemap.xml manuellement dans le dossiers pages d’un projet et y ajouter la structure d’un sitemap normal.

Pour avoir un sitemap dynamique, il faudra utiliser la fonction getServerSideProps.

Plus d’informations sur les Pages Router sur le site officiel de nextjs.

// pages/sitemap.xml.js

import fs from "fs"
import path from "path"
import matter from "gray-matter"

const URL = "https://www.commentcoder.com"

const SITE_ROUTES = ["", "/blog", "/newsletter", "/a-propos", "/ressources"]

function generateSiteMap(blogs) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     ${SITE_ROUTES.map(
       route => `
        <url>
          <loc>${`${URL}${slug}`}</loc>
          <changefreq>daily</changefreq>
          <priority>0.7</priority>
        </url>
         `
     )}
     ${blogs.map(({ slug }) =>
       `
         <url>
           <loc>${`${URL}/blog/${slug}`}</loc>
           <changefreq>daily</changefreq>
           <priority>0.7</priority>
         </url>
      `.join("")
     )}
   </urlset>`
}

function SiteMap() {}

export async function getServerSideProps({ res }) {
  const files = fs.readdirSync(path.join(process.cwd(), "blog"))

  const blogs = files.map(filename => {
    return {
      slug: filename.split(".")[0],
    }
  })

  const sitemap = generateSiteMap(blogs)

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

  return {
    props: {},
  }
}

export default SiteMap

Aller plus loin avec les sitemaps et NextJS

Bravo 🎉 vous savez maintenant comment ajouter des sitemaps statiques et dynamiques sur vos sites NextJS peu importe la version de votre projet.

Avoir un sitemap permet à des sites comme Google de parcourir votre site automatiquement à des temps définis pour que vos pages soient indexées correctement sur les moteurs de recherche.

N’hésitez pas à poser vos questions sur Twitter si vous en avez !

Comment Coder

Je m'appelle Thomas. J'ai commencé à coder dans mon enfance. Depuis ma sortie de la première promo de l'École 42, j'ai développé des centaines d'applications et sites web. Sur ce blog, je vous donne les meilleurs conseils et astuces pour apprendre comment apprendre à coder efficacement.