Comment ajouter un sitemap sur un site NextJS ?

<?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>

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

// 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",
    },
  })
}

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