a-blog cms × Next.js で sitemap.xml を実装する

公開日:

目次

a-blog cms をバックエンドで動かして、Next.js でフロントエンドを構築している Web サイトで sitemap.xml を実装する方法を紹介します。

このサイトでも今回紹介する方法で実装した sitemap.xml を以下のURLで確認できます。

https://blog.uidev.jp/sitemap.xml

利用するライブラリ

Metadata Files API

Next.js には sitemap.xml を作成する機能がデフォルトで組み込まれています。

Metadata Files API という機能を利用することで、プロジェクトの適切な場所に sitemap.(xml|js|ts) を設置するだけで sitemap.xml を実装できます。

nextjsのサムネイル画像

Metadata Files: sitemap.xml | Next.js

API Reference for the sitemap.xml file.

nextjs

そのため、Next.js の Metadata Files API を利用して sitemap.xml を実装していく方法を紹介します。

Sitemap モジュールのモジュールIDを作成する

sitemap.xml の作成に必要なデータを取得するため、Sitemap モジュールのモジュールIDを作成します。

条件設定で API 機能を有効化すること及び、階層設定で下階層のブログとカテゴリーを含めるように設定する必要があることに注意してください。

今回は sitemap という名前でモジュールIDを作成します。

acms-js-sdk を初期化する

acms-js-sdk は app/lib/acms/index.ts で初期化してインポートして利用できるようにします。

// app/lib/acms/index.ts

import { createClient } from '@uidev1116/acms-js-sdk';

const acmsClient = createClient({
  baseUrl: YOUR_BASE_URL,
  apiKey: YOUR_API_KEY,
});

export default acmsClient;

Sitemap モジュールのデータを取得する

次に、Sitemap モジュールのデータを取得するための getSitemap 関数を実装します。

import { MetadataRoute } from 'next';

const BASE_URL = 'https://example.com'; // WebサイトのURL

export async function getSitemap(): Promise<MetadataRoute.Sitemap> {
  const { data } = await acmsClient.get(
    {
      api: 'sitemap',
    }
  );

  const { 'url:loop': urls = [] } = data;

  return urls.map((url: any) => ({
    url: new URL(new URL(url.loc).pathname, BASE_URL).toString(),
    lastModified: url.lastmod,
  }));
}

Next.js が提供している MetadataRoute.Sitemap という型に戻り値を合わせます。

sitemap.ts を実装する

App Router で利用する app ディレクトリ直下に sitemap.ts を作成し、以下のようにコードを記述します。

// app/sitemap.ts

import { MetadataRoute } from 'next';
import { getSitemap } from './api';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  return await getSitemap();
}

先程作成した、 getSitemap 関数の結果をそのまま sitemap 関数の戻り値として返しています。

これで、sitemap.xml の実装は完了です。sitemap.xml にアクセスすることで確認することができます。

まとめ

今回は Next.js の Metadata Files API を活用して、a-blog cms をバックエンドで動かして、Next.js でフロントエンドを構築している Web サイトで sitemap.xml を実装する方法を紹介しました。

a-blog cms の標準モジュールである Sitemap モジュールと API 機能を組み合わせることで簡単に sitemap.xml を実装することができました。