Next v13.3からのSitemap.xml生成

NextJS 13.3で登場したMetadata Files APIを利用して、簡単にSitemap.xmlを作ってみる

Luminus

概要

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

#目次
記事一覧に戻る