2021-08-22
Next.jsのSSGでsitemapを超簡単に作成
next-sitemapでsitemapを簡単導入
手作りでもいいのですが、大変簡単に導入できるパッケージがあるのでそれを使っていきます。
npm install --save-dev next-sitemap
ファイルに設定情報を書く
新たにルートディレクトリに next-sitemap.js を作成し、以下のように書き込んでいきましょう。
module.exports = {
siteUrl: 'https://sample.jp',
generateRobotsTxt: true,
sitemapSize: 7000,
outDir: './out',
};
siteUrlのところは各自ご自身のドメインを入れましょう。Next.jsのSSGではビルド後にoutというディレクトリがデフォルトでできるのでその配下に出力します。
sitemap.xml と robots.txtファイルが出来上がります。
それではこの設定が済んだら、build時にサイトマップを更新してくれるようにコマンドを設定します。
// package.json
"scripts": {
"dev": "next dev",
"build": "next build && next export && next-sitemap --config next-sitemap.js",
....
たったこれだけでビルドした際にsitemapを作ってくれます。
「自分のドメイン/sitemap.xml」で確認できます。