Next v13.3からのSitemap.xml生成
NextJS 13.3で登場したMetadata Files APIを利用して、簡単にSitemap.xmlを作ってみる
2023-07-23
概要
NextJS v13.3のApp Routerでは簡単にSitemap.xmlを作成できるようになっています。
動的なメタデータも取り扱うことが可能です。
少し前まではnext-sitemapパッケージなどを用いて生成していたのですが、Metadata Files APIの到来によりNext本体で生成出来るようになっています。
コード
app配下に設置しています。
※実際に利用している当サイトのマップで、microCMSからデータを取得しています。
import { getList, getTagList } from '@/libs/microcms';
export default async function sitemap() {
const allPosts = await getList();
const allTags = await getTagList();
// 記事一覧ページ
const posts = allPosts.contents.map((post) => ({
url: `https://luminus.dev/articles/${post.id}`,
lastModified: post.createdAt,
}));
// タグ一覧ページ
const tags = allTags.contents.map((tag) => ({
url: `https://luminus.dev/tags/${tag.id}`,
lastModified: tag.createdAt,
}));
// その他のページ
const routes = ['', '/search'].map((route) => ({
url: `https://luminus.dev${route}`,
lastModified: new Date().toISOString(),
}));
return [...routes, ...tags, ...posts];
}記事とタグの一覧ページに必要な値をmicroCMSから受け取り、その他のページも含めて配列で返しています。
Sitemap.xml
出力されたサイトマップは以下の通り
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://luminus.dev</loc>
<lastmod>2023-07-23T14:01:48.813Z</lastmod>
</url>
<url>
<loc>https://luminus.dev/search</loc>
<lastmod>2023-07-23T14:01:48.813Z</lastmod>
</url>
<url>
<loc>https://luminus.dev/tags/g7bfc3ohds</loc>
<lastmod>2023-06-10T16:18:40.365Z</lastmod>
</url>
<url>
<loc>https://luminus.dev/tags/zszl_z8n9bs1</loc>
<lastmod>2023-06-10T13:31:47.760Z</lastmod>
</url>
<url>
<loc>https://luminus.dev/tags/lxjl1w5sg6</loc>
<lastmod>2023-06-10T13:31:34.929Z</lastmod>
</url>
<url>
<loc>https://luminus.dev/tags/erlu0oupss2u</loc>
<lastmod>2023-06-10T10:09:13.852Z</lastmod>
</url>
<url>
<loc>https://luminus.dev/articles/npq5cyvzr3</loc>
<lastmod>2023-07-23T13:05:38.095Z</lastmod>
</url>
<url>
<loc>https://luminus.dev/articles/h9z7al3a2</loc>
<lastmod>2023-06-11T07:42:00.875Z</lastmod>
</url>
<url>
<loc>https://luminus.dev/articles/ki_pi9fgwk1</loc>
<lastmod>2023-06-10T09:49:37.543Z</lastmod>
</url>
</urlset>参考
NextJS | sitemap.xml
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap
リポジトリ Luminus_XD | sitemap.ts
https://github.com/luminus-xd/Luminus_XD/blob/main/app/sitemap.ts
