【Next.js】静的サイトのサイトマップを生成してみた

2020.11.03

Next.jsTypeScript

おはこんにちばんは。Next.jsで実装した静的サイトのサイトマップを生成してみました。
その手順を記載します。サンプルコードはこちら。

実行環境

Next.js 10.0.0
React 17.0.1

プロジェクトの設定

まずは、雑に静的ページを生成します。

./pages / [dynamic] /index.js

import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
import React from 'react'
import { useRouter } from 'next/router';

const DynamicPage: NextPage = () => {
  const router = useRouter();
  return (
    <div>
      <h1>{router.query.dynamic}</h1>
    </div>
  )
}

export const getStaticPaths: GetStaticPaths = async () => {
  const paths = [...Array(10)].map((_, index) => ({
    params: {
      dynamic: `${index}`,
    },
  }))
  
  return { paths, fallback: false };
}

export const getStaticProps: GetStaticProps = async (context) => {
  return {
    props: {},
  }
}

export default DynamicPage

packageを追加

今回は next-sitemap というpackageを利用します。

yarn add next-sitemap -D

次にルート配下に next-sitemap.js という設定ファイルを作成します。

module.exports = {
  siteUrl: "https://www.example.com",
  generateRobotsTxt: true,
};

最後にプロジェクトがビルドされるたびにサイトマップ生成をするようにするため、package.jsonのscriptに以下を追加します。

"postbuild": "next-sitemap"

プロジェクトをビルドする

yarn build

そうするとpublic配下に以下のようなrobots.txtとsitemap.xmlに生成されたかと思います。サイトマップにはすべての静的ページが記載されています。

./public/robots.txt

User-agent: *
Allow: /
Host: https://www.example.com
Sitemap: https://www.example.com/sitemap.xml

./public/sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url><loc>https://www.example.com/</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
<url><loc>https://www.example.com/0</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
<url><loc>https://www.example.com/1</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
<url><loc>https://www.example.com/2</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
<url><loc>https://www.example.com/3</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
<url><loc>https://www.example.com/4</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
<url><loc>https://www.example.com/5</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
<url><loc>https://www.example.com/6</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
<url><loc>https://www.example.com/7</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
<url><loc>https://www.example.com/8</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
<url><loc>https://www.example.com/9</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2020-11-03T07:56:27.537Z</lastmod></url>
</urlset>

Google Serch Consoleからサイトマップを登録する

あとは、Google Serch Consoleの管理画面からサイトマップを追加します。https://www.example.com/sitemap.xml で登録可能です。
正しく実装出来ていれば、以下のようにURLを検出してインデックスされるはずです。お疲れ様でした。

さいごに

このブログ自体のサイトマップを作成していなかったので、実装してみました。とても簡単ですね。

参考

https://www.iamvishnusankar.com/blogs/how-to-generate-sitemap-for-nextjs-projects/