かつて、 Page Routerを使ったNext.jsのプロジェクトでサイトマップを自動で生成したこと がありました。
今回は、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 ]; }
dynamicPathsを追加すればOKです。
上記例ではmicroCMSから記事一覧を取得する想定しています。
Next.js(App Router)× microCMSの実装方法は、こちらのドキュメント がとてもわかりやすかったです。