2020/05/26
@nuxtjs/sitemapモジュールを使ってsitemapを作成する
概要
@nuxtjs/sitemapモジュールを使って、本サイトのsitemapの自動生成ができるように対応しました。
こちらの記事では、コマンドラインで、sitemapを生成していたのですが
どうやら@nuxtjs/sitemapモジュールは生成したsitemapのキャッシュやgzip対応なども含まれていて
大変便利なことがわかったので、以前の方式をやめて、こちらのmoduleを使うように移行しました。
実施事項
- moduleのインストール
% yarn add @nuxtjs/sitemap
- nuxt.config.jsの修正
(少しデフォルメはしてますが)以下のように修正しました。
// modulesに@nuxtjs/sitemapを追加
modules: [
'@nuxtjs/sitemap'
],
// 以下をごっそり追加
sitemap: {
hostname: 'https://this-site.com',
gzip: true,
path: '/sitemap.xml',
cacheTime: 1000 * 60 * 60 * 24, // 1 day
routes: async () => {
const apiBaseUrl = 'https://api-host/api/v1'
const results = [
{
url: '/',
changefreq: 'daily'
},
{
url: '/about',
changefreq: 'monthly'
}
]
const { data } = await axios.get(`${apiBaseUrl}/entities/`)
if (data) {
data.forEach((entity) => {
results.push({
url: `/entities/${entity.slug}`,
lastmod: entity.updated_at,
changefreq: 'weekly'
})
})
}
return results
}
},
以上の対応で、以下のrouteが追加されて、sitemapの生成を確認できました。
関連する記事

Nuxt2からNuxt3への移行とNextJSとNuxt3の比較について
弊社ホームページとブログサイトをNuxt2からNuxt3ベースに移行しました。

Nuxt.jsからNext.jsへのリニューアルを経て思うこと
Nuxt.jsからNext.jsへフルリニューアルしたことで見えてきた個人的なメリットとデメリットを整理します

NuxtJSにEditor.jsを導入
リッチでカスタマイズが自由なテキストエディタであるEditor.jsをNuxtJSのサイトに導入しました。

AOSをNuxtJSのサイトに導入する
スクロールアニメーションを簡単に実装できるAOSというライブラリをNuxtJSベースのサイトに導入しました