みかづきブログ・カスタム

基本的にはちょちょいのほいです。

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

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

blog.kimizuka.org

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

nextjs.org

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 ];
}

dynamicPathsを追加すればOKです。
上記例ではmicroCMSから記事一覧を取得する想定しています。

Next.js(App Router)× microCMSの実装方法は、こちらのドキュメント がとてもわかりやすかったです。

blog.microcms.io