nextjsでサイトマップ作る方法

pages/sitemap.xml.tsx を作成して下記の内容で構築しました

ちなみにですが、public/sitemap.xml でもいけたので、下記のようにあまりページを更新しない予定→手動で管理であればpublicでも良さそうですし、動的に追加して行きたいなら、loop回していくとかでいけるかなと思います

import { GetServerSideProps, GetServerSidePropsContext } from 'next';
import React from 'react';

const Sitemap: React.FC = () => null;

export const getServerSideProps: GetServerSideProps = async (
  { res }: GetServerSidePropsContext,
) => {
  if (res) {
    res.setHeader('Content-Type', 'text/xml');
    res.write(`<?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        <url>
          <loc>https://blog.gimejob.com/</loc>
          <priority>1.0</priority>
          <changefreq>weekly</changefreq>
        </url>
        <url>
          <loc>https://blog.gimejob.com/work_experience_with_fastapi</loc>
          <priority>0.8</priority>
          <changefreq>weekly</changefreq>
        </url>
        <url>
          <loc>https://blog.gimejob.com/definition_of_work_experience_of_engineer</loc>
          <priority>0.8</priority>
          <changefreq>weekly</changefreq>
        </url>
        <url>
          <loc>https://blog.gimejob.com/work_experience_with_ruby_on_rails</loc>
          <priority>0.8</priority>
          <changefreq>weekly</changefreq>
        </url>
        <url>
          <loc>https://blog.gimejob.com/provide_work_experience</loc>
          <priority>0.8</priority>
          <changefreq>weekly</changefreq>
        </url>
      </urlset>`);
    res.end();
  }
  return {
    props: {},
  };
};

export default Sitemap;

参考記事

Next.js | Is there any way to render an .xml file?