Next.jsのApp routerでsitemap.xmlを生成する

公式はこちら：
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

概要

CMS：WordPress、フロント：Next.jsのヘッドレスCMSにsitemap.xmlを設置したい。
ブログアプリケーションなので、動的ページあり。

sitemap.ts

import { PostService } from '@/services/PostService';
import { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap>  {
    const defaultPages: MetadataRoute.Sitemap = [
        {
          url: 'https://example.com', 
          lastModified: new Date(),
          changeFrequency: "monthly",
          priority: 0.5,
        },
    ];

    const posts = await PostService.getPosts(); // 投稿を取得
    const articlePages: MetadataRoute.Sitemap = posts.map((post) => ({
        url: `https://example-design.com/${post.slug}`,
        lastModified: new Date(post.modified),
        changeFrequency: "weekly",
        priority: 1,
  }));

  return [...defaultPages, ...articlePages];
}

実際に生成されたsitemap.xml：
https://mucca-design.com/sitemap.xml

（👆2025.1時点でまだ公開してないので、まだ見れないです・・・🙇‍♀️）

参考

ありがとうございます・・・！✨

• https://zenn.dev/mh4gf/scraps/21803bbf1c2d25
• https://zenn.dev/kazzyfrog/articles/about-sitemap-with-nextjs