App Router（Next.js 13.4.4）を使ったウェブサイトで自動的にサイトマップを作成する 🗺️

かつて、 Page Routerを使ったNext.jsのプロジェクトでサイトマップを自動で生成したことがありました。

blog.kimizuka.org

今回は、App Router版です。
といっても、とくに難しいことはありません。ドキュメントに書いてある通りです。

PageRouterのときのように next-sitemap も必要ありません。かなりシンプルです。

静的サイトにおけるサイトマップ生成手順

app/sitemap.ts の作成

app/sitemap.ts（もしくはapp/sitemap.js）を作成します。

import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseURL = process.env.BASE_URL || ''; // URLは.envに記載
  const lastModified = new Date();

  const staticPaths = [{
    url: baseURL,
    lastModified
  }];

  return [ ...staticPaths ];
}

これでOKです。

yarn dev を実行して、 http://localhost:3000/sitemap.xml にアクセスしてみてください。

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://kimizuka.fm</loc>
    <lastmod>2023-06-27T04:12:00.007Z</lastmod>
  </url>
</urlset>

というようなXMLが生成されているはずです。
（URLは.envのBASE_URLになります）

これをVercelにデプロイすればOKです。

Jamstackにおけるサイトマップの生成手順

app/sitemap.ts の作成

app/sitemap.ts（もしくはapp/sitemap.js）を作成します。

import { MetadataRoute } from 'next';
import type { MicroCMSDate, MicroCMSImage, MicroCMSQueries } from 'microcms-js-sdk';
import { createClient } from 'microcms-js-sdk';

interface Article {
  id: string;
  date: MicroCMSDate;
  title: string;
  description?: string;
  image?: MicroCMSImage;
}

const client = createClient({
  serviceDomain: process.env.MICROCMS_SERVICE_DOMAIN || '',
  apiKey: process.env.MICROCMS_API_KEY || ''
});

async function getWorks(queries?: MicroCMSQueries) {
  const listData = await client.getList<Article>({
    endpoint: 'works',
    queries
  });

  return listData;
};

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseURL = process.env.BASE_URL || '';
  const { contents } = await getWorks();
  const lastModified = new Date();

  const staticPaths = [{
    url: baseURL,
    lastModified
  }];

  const dynamicPaths = contents.map(({ url }) => {
    return {
      url: `${ baseURL }/${url}`,
      lastModified
    };
  });

  return [ ...staticPaths, ...dynamicPaths ];
}