【Next.js 13】next-sitemapで自動更新サイトマップを作成する。

2023/7/3

Next.js 13.3で動的サイトマップの作成が簡単になりました。

ただ、新しいページを生成した場合などに毎回ビルド処理を行わないとサイトマップが更新されない事態が起きてしまったので、今回はその対処法メモです。

結論としては「next-sitemap」を使用して、サーバーサイドレンダリングするサイトマップを作成します。

「next-sitemap」をインストールする
「next-sitemap.config.js」を作成&編集する
route.tsを作成する
まとめ

「next-sitemap」をインストールする

$ npm i next-sitemap

「next-sitemap.config.js」を作成&編集する

next-sitemap.config.jsを作成します。

// next-sitemap.config.js
/** @type {import('next-sitemap').IConfig} */
module.exports = {
    siteUrl: `https://${process.env.NEXT_PUBLIC_DOMAIN_URL}`,
    exclude: ['/server-sitemap.xml'],
}

route.tsを作成する

server-sitemap.xml/route.tsを作成します。

import { getServerSideSitemap } from "next-sitemap";
import { getPosts } from "@/lib/posts";


// サイトマップに追加するページ指定
export async function GET(request: Request) {
    const baseUrl = `https://${process.env.NEXT_PUBLIC_DOMAIN_URL}`;

    // トップページ
    const static_pages = [
        {
            loc: `${baseUrl}/`,
            lastmod: new Date().toISOString(),
        },
    ];

    // 投稿ページ
    const posts = await getPosts();
    const post_sitemaps = posts?.map((post) => {
        return {
            loc: `${baseUrl}/${post.id}`,
            lastmod: new Date(post.updated_at).toISOString(),
        };
    });

    return getServerSideSitemap([
        ...static_pages,      // トップページ
        ...post_sitemaps||[]  // 投稿ページ
    ]);
}