Nuxt.jsで動的ページ含め、サイトマップ(sitemap.xml)を自動生成する方法

実装手順

sitemapモジュールのインストール

$ yarn add @nuxtjs/sitemap

or

$ npm i --save @nuxtjs/sitemap

nuxt.config.jsに登録

modules: [
  '@nuxtjs/sitemap'
]

詳細設定(nuxt.config.js)

sitemapプロパティを下記のようにnuxt.config.js内にセットしたら完了！ 動的なルートも生成したい場合は、routesメソッドに対し、生成したいurlリストを配列の形で返すと生成されました。

注意点としては、非同期でAPI叩いて取得する場合がほとんどだと思うので、Promiseオブジェクトを返すか、async awaitで対応すれば良いと思う。

↓async await版(Contentfulに投稿した記事一覧urlを取得する例)

sitemap: {
  path: '/sitemap.xml', // 出力パス
  hostname: 'https://www.webfacts.jp',
  cacheTime: 1000 * 60 * 15,
  generate: false, // nuxt generate で静的ファイル出力する場合にはtrueにする
  exclude: [ // 除外項目
     '/auth/**',
     '/my-page'
  ],
  async routes () { // ここで動的ページの出力をする
    const contentful = require('contentful');
    const client = contentful.createClient({
      space: config.CTF_SPACE_ID,
      accessToken: config.CTF_CDA_ACCESS_TOKEN
    });
    const posts = await client.getEntries({
      'content_type': config.CTF_BLOG_POST_TYPE_ID,
      order: '-sys.createdAt'
    });

    let urls = [];
    posts.items.forEach((val, idx, arr) => {
      urls[idx] = val.fields.slug
    });

    return urls;
  }
}

おわり〜。