🪬
Next.jsのSSGでサイトマップをさくっと生成する
はじめに
今回は next-sitemap というパッケージを使用してサイトマップをさくっと生成する方法です。
自前で生成できますが、今回はパッケージでさくっと作りたかったので採用しました。
手順
パッケージのインストール
まずはパッケージをインストールします。
yarn add next-sitemap -D
package.json に追加されます。
設定ファイルの追加
インストールしたらプロジェクトルートに next-sitemap.js という名前のファイルを作成し、以下のコードを記述します。
next-sitemap.js
module.exports = {
siteUrl: process.env.SITE_URL || 'https://example.com',
generateRobotsTxt: true, // (optional)
outDir: './out'
// ...other options
}
siteUrl は名前の通りサイトの url を記入します。
generateRobotsTxt は true にしておくことで、 robots.txt を生成してくれるので、不要であれば false で大丈夫です。
outDir は sitemap.xml が出力される場所を指定します。 Next.js の SSG は out ディレクトリに出力するので、 ./out を指定しています。
その他オプションがありますが、 Github の README で詳細を確認できます。
コマンドの設定
package.json のスクリプトに "postbuild": "next-sitemap" というのコマンドを追加します。
package.js
{
"build": "next build && next export",
"postbuild": "next-sitemap"
}
サイトマップの生成
あとはビルドをするだけで、指定してある. /out ディレクトリに sitemap.xml と robots.txt が生成されます。
yarn build
Google Search Console に登録
サイトマップを作成したら Google Search Console に URL を登録しましょう。
↓こちらを参考に設定してサイトマップの URL を明示しておきます。
Discussion