Next.jsで動的にサイトマップを生成する

author: anonymous
categories: microCMS, Next.js
created_at: 2023.09.22
updated_at: 2023.10.01

はじめに

SEO対策の一環として、サイトマップの生成は非常に重要な要素です。

今回はNext.js（App Routerを使用）とmicroCMSを使用して、動的なサイトマップを生成する方法について解説します。

前提条件

Next.jsのプロジェクトが既に設定されていること
microCMSでコンテンツが管理されていること

実装

Step 1: microCMSクライアントの作成

まずは、microCMSのクライアントの作成をします。

// libs/microcms/client.ts
import 'server-only'
import { createClient } from 'microcms-js-sdk'
import { microCMSConfig } from '@/config/microCms'

export const client = createClient({
 serviceDomain: microCMSConfig.serviceDomain,
 apiKey: microCMSConfig.apiKey,
 customFetch: (input, init) => {
  if (typeof input === 'string') {
   const newInput = new URL(input)
   const time = new Date()
   newInput.searchParams.set('cacheclearparam', `${time.getMilliseconds()}`)
   return fetch(newInput.href, init)
  }
  return fetch(input, init)
 },
})

Step 2: 記事一覧の取得

次に、microCMSから記事の一覧を取得するための関数を作成します。

// libs/microcms/article.ts
import 'server-only'
import type { MicroCMSQueries } from 'microcms-js-sdk'
import { client } from '@/libs/microcms/client'
import type { Article } from '@/types'

const endpoint = 'articles'

export const fetchArticleList = async (queries?: MicroCMSQueries) => {
 const articleList = await client.getList<Article>({
  endpoint,
  queries,
 })

 return articleList
}

Step 3: サイトマップの動的生成

最後に、サイトマップを作成するための関数を作成します。

こちらを参考に作成しました。

// app/sitemap.ts
import { MetadataRoute } from 'next'
import { fetchArticleList } from '@/libs/microcms/article'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
 const { contents } = await fetchArticleList()

 const paths = contents.map((article) => {
  return {
   articleId: article.id,
  }
 })

 const articleMap = paths.map((path) => {
  return {
   url: `https://tech.shinaps.jp/articles/${path.articleId}`,
   lastModified: new Date(),
  }
 })

 return [
  {
   url: 'https://tech.shinaps.jp',
   lastModified: new Date(),
  },
  ...articleMap,
 ]
}

まとめ

これらの設定だけで、動的にサイトマップを作成することができます。

作成されたサイトマップは http://localhost:3000/sitemap.xml で確認することができます。

shinaps

Tech Blog