Next.jsのSSRを使って動的にサイトマップを生成する

ベーシックな使い方は、SSGでのサイトマップ生成を想定していますが、SSRなどでの動的なサイトマップ生成も実現可能です。

最新版はNext.js13にも対応しており、appディレクトリでも利用が可能です。
（pageディレクトリでも利用可能）

next-sitemapはバージョンによって書き方が異なるので、注意してください。

next-sitemapの基本的な使い方

ベーシックな使い方あるSSGでの利用方法について解説します。

まずは、インストールをします。

$ npm install next-sitemap

$ yarn add next-sitemap

ルートディレクトリ配下にnext-sitemap.config.jsを作成します。

ファイル内容は以下のとおりです。
こちらのファイルは、環境変数の読み込みも可能です。
なので、サイトURLは環境に合わせて変更できます。

// next-sitemap.config.js

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

package.json等のパッケージ管理ファイルにscriptを追加します。

// package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild":  "next-sitemap", // ここの1行を追加する!
     .......
  }
}

SSGの場合は、追加したスクリプトを実行するだけでサイトマップが生成されます。

Next.jsのSSRでサイトマップを生成する

next-sitemapはSSGだけでなく、SSRでのサイトマップ生成も可能です。

next-sitemap.config.jsに追記が必要になります。

// next-sitemap.config.js

module.exports = {
  siteUrl: 'https://dev-harry-next.com',
  generateRobotsTxt: true,
  // これより以下が追加項目
  exclude: ['/server-sitemap.xml'],
  robotsTxtOptions: {
    additionalSitemaps: [
      'https://example.com/server-sitemap.xml',
    ],
  }
};

今回は、pages配下に作成することを想定していますので、pages配下にserver-sitemap.xmlディレクトリを作成し、さらにその配下にindex.tsxを作成します。

├── pages
│   └── server-sitemap.xml
               └── index.tsx

index.tsxのファイル内容は以下になります。

// pages/server-sitemap.xml/index.tsx

import { GetServerSideProps } from 'next'
import { getServerSideSitemapLegacy } from 'next-sitemap'

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  // ここでデータを取得して、そのデータを使うことも可能
  // const response = await fetcher('https://example.com/blogs')
  // const fields = response.contents.map((content) => {
  //   return {
  //     loc: `https://example.com/${content.category.name}/${content.id}`,
  //     lastmod: content.updatedAt
  //   }
  // })

  const fields = []
  fields.push(
    {
      loc: 'https://example.com/',
      lastmod: new Date().toISOString(),
    },
    {
      loc: 'https://example.com/infrastructure',
      lastmod: new Date().toISOString(),
    },
    {
      loc: 'https://example.com/frontend',
      lastmod: new Date().toISOString(),
    },
    {
      loc: 'https://example.com/seo',
      lastmod: new Date().toISOString(),
    }
  )


  return getServerSideSitemapLegacy(ctx, fields)
}


export default function Sitemap() {}

サイトマップが生成されているか確認するにはhttps://example.com/server-sitemap.xmlを確認してください。

さいごに

サイトマップはSEO上、重要なツールです。

今回紹介したnext-sitemapを使えば、簡単にサイトマップを生成できますので、ぜひ使ってみてください。

ホーム

Next.jsのSSRを使って動的にサイトマップを生成する

目次

この記事を読んだ後に理解できること

サイトマップとは？

next-sitemapとは？

next-sitemapの基本的な使い方

Next.jsのSSRでサイトマップを生成する

さいごに