Next.jsのApp routerでsitemap.xmlを作成する方法

Next.jsのApp routerでsitemap.xmlを作成する方法

Next.jsでsitemap.xmlを作成する方法になります。

前提

Next.jsはApp routerを使用する前提になります。

最小限のサンプル

App routerのNext.jsでは、sitemap.xmlの生成はデフォルトで対応しています。別途ライブラリを入れる必要はありません。

以下が最小限のサンプルです。

このファイルはapp/sitemap.tsとして作成します。

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  return [
		{
			url: 'https://example.com/', // ★１
			lastModified: new Date(), // ★２
			changeFrequency: 'daily', // ★３
			priority: 1, // ★４
		},
		{
			url: 'https://example.com/page-1',
			lastModified: new Date(),
			changeFrequency: 'weekly',
			priority: 0.9,
		}
	]
}

この状態で、/sitemap.xmlにアクセスすると以下のsitemap.xmlが表示されます。

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
		<url>
				<loc>https://example.com/</loc>
				<lastmod>2024-08-28T14:38:13.747Z</lastmod>
				<changefreq>daily</changefreq>
				<priority>1</priority>
		</url>
		<url>
				<loc>https://example.com/page-1</loc>
				<lastmod>2024-08-28T14:38:13.747Z</lastmod>
				<changefreq>weekly</changefreq>
				<priority>0.9</priority>
		</url>
</urlset>

ちゃんとsitemap.xmlが表示されています。