NuxtでMicroCMSの記事をサイトマップに含める

当記事は、半年以上前に投稿されたものです。そのため、古い技術や情報をもとに書かれている可能性があります。参照する際は十分に注意していただければです。

はじめに

先日、Nuxt と MicroCMS で JamStack な個人ブログを作成したのですが、その際に MicroCMS のコンテンツをどうサイトマップに反映するか悩んだので、個人的解法を残しておきます。

TL; DR

npm install --save @nuxtjs/sitemap
  • nuxt.config.js
const baseUrl = "https://hogehoge.com"
const microcmsEndpoint = "https://hogehoge.microcms.io/api/v1" // お使いのmicocmsのエンドポイントを指定

export default {
  // ~~略~~
  modules: [
    "@nuxtjs/sitemap",
  ],
  sitemap: {
    path: "/sitemap.xml",
    hostname: baseUrl,
    exclude: ["/403", "/about"], // 除外したいパスを適宜指定
    routes(callback) {
      const limitation = 100
      // /content といパス名で記事やコンテンツリストを管理をしていた場合
      axios
        .get(`${microcmsEndpoint}/content?limit=${limitation}`, {
          headers: { "X-API-KEY": process.env.MICROCMS_API_KEY },
        })
        .then((res) => {
          const routes = res.data.contents.map((content) => {
            return `/${content.id}`
          })
          callback(null, routes)
        })
        .catch(callback)
    },
  },
}

参考文献


Canji

クラウド周りをちょこまかしたい注意散漫人間。個人開発を楽しんでいたあの頃。