Next.js13でDynamic Sitemapを設定する

はじめに

以前こちらの記事でNext.js13でのサイトマップの作り方を説明しました

今回はさらに/events/1のようなidを含めたサイトマップを作る方法をまとめます

やり方

app/sitemap.tsを作って以下の処理を書きます

app/sitemap.ts

import { getEvents } from "./lib/api/event";
import { getPitches } from "./lib/api/pitch";

const URL = "https://pitchme.jp";

export default async function sitemap() {
  const events = await getEvents();
  const eventsPages = events.map((event) => {
    return {
      url: `${URL}/events/${event.id}`,
      lastModified: event.date,
    };
  });

  const pitches = await getPitches();
  const pitchesPages = pitches.map((pitch) => {
    return {
      url: `${URL}/pitch/${pitch.id}`,
      lastModified: new Date(),
    };
  });

  const routes = [
    { url: `${URL}/` },
    { url: `${URL}/events` },
    { url: `${URL}/events/recruitment` },
    { url: `${URL}/pitch` },
    { url: `${URL}/terms` },
    { url: `${URL}/privacy` },
    { url: `${URL}/contact` },
  ].map((route) => ({
    url: route.url,
    lastModified: new Date(),
  }));

  return [...routes, ...eventsPages, ...pitchesPages];
}

サーバーサイドでデータを取得してIdを取得して返しています
ちなみにサイトマップ登録したところ日付が不正となったのですが、時間が経つとなおりました

参考