Next.jsでサイトマップを生成する方法

Next.js 15のappディレクトリでは、sitemap.tsまたはsitemap.jsファイルを配置することで、動的なサイトマップを簡単に生成できます。

1. またはファイルの作成

まず、appディレクトリ直下にsitemap.tsまたはsitemap.jsファイルを作成します。

  sitemap.ts
  page.tsx

2. サイトマップの定義

sitemap.tsまたはsitemap.jsファイル内で、サイトマップの定義を行います。

import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://example.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://example.com/contact',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ];
}

url: ページのURL
lastModified: ページの最終更新日
changeFrequency: ページの更新頻度 (オプション)
priority: ページの優先度 (オプション)

3. 動的なサイトマップの生成

データベースやAPIからデータを取得して、動的にサイトマップを生成することも可能です。

app/sitemap.ts

import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await fetch('https://example.com/api/posts').then((res) => res.json());

  const postUrls = posts.map((post) => ({
    url: `https://example.com/posts/${post.id}`,
    lastModified: new Date(),
  }));

  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    ...postUrls,
  ];
}

4. ビルドと確認

サイトマップを生成するには、Next.jsアプリケーションをビルドする必要があります。

npm run buildビルド後、public/sitemap.xmlにサイトマップが生成されます。

ブラウザでhttps://example.com/sitemap.xmlにアクセスして、サイトマップを確認できます。

注意事項

sitemap.tsまたはsitemap.jsファイルは、appディレクトリ直下に配置する必要があります。
動的なサイトマップを生成する場合、async関数を使用する必要があります。
changeFrequencyとpriorityはオプションですが、SEOのために設定することをおすすめします。

まとめ

Next.js 15のappディレクトリでは、sitemap.tsまたはsitemap.jsファイルを使用することで、静的および動的なサイトマップを簡単に生成できます。

サイトマップを適切に設定することで、検索エンジンにサイトの構造を伝え、SEOを向上させることができます。