はじめに

当サイトはNext.jsを利用しています
当サイトのサイトマップ作成にnext-sitemapというライブラリを利用することで自動生成が可能となりました。
細かい設定が不要なこのライブラリはサイトマップ作成の自動化に非常に有用だったので、その手順を記載していきます。

当サイトの構築時の手順はこちらから。

Next.jsとAWS Amplifyを利用してWebサイトを爆速構築する

はじめに 当サイトはNext.jsを利用しています。ホスティング先としてAWS Amplifyを利用することで爆速構築することができました。今後この構成を流用していくため構築手順を記載していきます。 前提 AWSアカウント作成済み AWSの...

wp.tona-h.com

2024.05.26

① 基本編

インストール

next-sitemapをnpm経由でインストールします。

npm add next-sitemap

設定ファイルの作成

プロジェクトルートに next-sitemap.config.js というファイルを作成します。ファイルの内容を設定します。

next-sitemap.config.js

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://entools.tona-h.com',
  generateRobotsTxt: true, 
}

ビルドスクリプトの設定

package.json に下記を追加します。これでNext.jsのビルド後に自動でサイトマップが生成されます。

package.json

{
  ~~~
  "scripts": {
    ~~~,
    "build": "next build",
    "postbuild": "next-sitemap",
    ~~~
  },
  ~~~
}

サイトマップの確認

{ドメイン}/sitemap.xml を表示するとサイトマップが生成されている事がわかります！

➁ 応用（ヘッドレスCMS）編

動的にページが増減するヘッドレスCMSではひと工夫が必要です。

sitemap.tsの作成

Next.jsの機能を利用し、下記のようなコードを書くことで動的にサイトマップを生成することが可能になります。ビルドした際は {ドメイン}/sample/sitemap.xml というパスにサイトマップが生成されます。

app/sample/sitemp.ts

import { MetadataRoute } from 'next';

async function getPostsInParentCategory(parentCategorySlug: string) {
  const query = `
    query NewQuery {
      category(id: "${parentCategorySlug}", idType: SLUG) {
        id
        children {
          nodes {
            slug
            uri
            posts(last: 10, where: {status: PUBLISH}) {
              nodes {
                uri
                title
                date
                modified
                status
                featuredImage {
                  node {
                    uri
                    altText
                    sourceUrl
                  }
                }
              }
            }
          }
        }
      }
    }
  `
  
  const { data } = await get(query)

  const posts = []
  data.category.children.nodes.forEach((node) => {
    node.posts.nodes.forEach((n) => {
      posts.push(n)
    })
  })

  return posts
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPostsInParentCategory("entools")

  return posts.map((post) => {
    return {
      url: `${process.env.NEXT_PUBLIC_BASE_URL}/${post.uri}`,
      lastModified: `${post.modified}.000Z`,
      changeFrequency: 'daily',
      priority: 0.7,
    }
  })
}

設定ファイル（next-sitemap.config.js）の更新

設定ファイル（next-sitemap.config.js）に “exclude“・”robotsTxtOptions“ブロックを追加します。

next-sitemap.config.js

module.exports = {
  siteUrl: process.env.NEXT_PUBLIC_BASE_URL,
  generateRobotsTxt: true,
  exclude: [
    '/sample/sitemap.xml'
  ],
  robotsTxtOptions: {
    additionalSitemaps: [
      (process.env.NEXT_PUBLIC_BASE_URL) + '/sample/sitemap.xml',
    ],
  },
}

サイトマップの確認

{ドメイン}/sitemap.xml を表示するとサイトマップが生成されている事がわかります！