はじめに
今回はnext-sitemap
というパッケージを使用してサイトマップをさくっと生成する方法です。
https://github.com/iamvishnusankar/next-sitemap
自前で生成することも可能ですが、今回はパッケージでさくっと作りたかったので採用しました。
手順
パッケージのインストール
まずはパッケージをインストールします。
yarn add next-sitemap -D
package.jsonに追加されます。
設定ファイルの追加
インストールしたらプロジェクトルートに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"
というのコマンドを追加します。
{
"build": "next build && next export",
"postbuild": "next-sitemap"
}
postbuild は npm の機能で、postxxx というタスクを定義すると、xxx タスクの完了後に自動的に実行されます。
なので、buildの後にnext-sitemap が実行されます。
サイトマップの生成
あとはビルドをするだけで、指定してある./out
ディレクトリにsitemap.xml
とrobots.txt
が生成されます。
yarn build
Google Search Consoleに登録
サイトマップを作成したらGoogle Search ConsoleにURLを登録しましょう。
↓こちらを参考に設定してサイトマップのURLを明示しておきます。