はじめに

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

TL; DR

1npm install --save @nuxtjs/sitemap

• nuxt.config.js

1const baseUrl = "https://hogehoge.com";
2const microcmsEndpoint = "https://hogehoge.microcms.io/api/v1"; // お使いのmicocmsのエンドポイントを指定
3
4export default {
5  // ~~略~~
6  modules: ["@nuxtjs/sitemap"],
7  sitemap: {
8    path: "/sitemap.xml",
9    hostname: baseUrl,
10    exclude: ["/403", "/about"], // 除外したいパスを適宜指定
11    routes(callback) {
12      const limitation = 100;
13      // /content といパス名で記事やコンテンツリストを管理をしていた場合
14      axios
15        .get(`${microcmsEndpoint}/content?limit=${limitation}`, {
16          headers: { "X-API-KEY": process.env.MICROCMS_API_KEY },
17        })
18        .then((res) => {
19          const routes = res.data.contents.map((content) => {
20            return `/${content.id}`;
21          });
22          callback(null, routes);
23        })
24        .catch(callback);
25    },
26  },
27};

参考文献

• [npm] @nuxtjs/sitemap