next-sitemapはNext.jsで制作したWebアプリケーションのサイトマップを簡単に生成してくれる便利なパッケージです。
<code>outDir</code> オプションを使用して出力ディレクトリを変更する際に気をつけるべきだと思いましたので情報共有します。
<h1 id="%E3%81%A9%E3%82%93%E3%81%AA%E5%95%8F%E9%A1%8C%E3%81%8C%E8%B5%B7%E3%81%8D%E3%82%8B%E3%81%8B%E3%81%8C%E5%88%86%E3%81%8B%E3%82%8B%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB">
<a class="header-anchor-link" href="#%E3%81%A9%E3%82%93%E3%81%AA%E5%95%8F%E9%A1%8C%E3%81%8C%E8%B5%B7%E3%81%8D%E3%82%8B%E3%81%8B%E3%81%8C%E5%88%86%E3%81%8B%E3%82%8B%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB" aria-hidden="true"></a> どんな問題が起きるかが分かるサンプル</h1>
<iframe id="zenn-embedded__5f3ef11e4b66e" src="https://embed.zenn.studio/card#zenn-embedded__5f3ef11e4b66e" data-content="https%3A%2F%2Fgithub.com%2Fmasa5714%2Fnext-sitemap-outdir-sample" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/masa5714/next-sitemap-outdir-sample" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/masa5714/next-sitemap-outdir-sample</a>
<h1 id="next-sitemap.config.js%E3%81%AE%E8%A8%98%E8%BF%B0">
<a class="header-anchor-link" href="#next-sitemap.config.js%E3%81%AE%E8%A8%98%E8%BF%B0" aria-hidden="true"></a> next-sitemap.config.jsの記述</h1>
<div class="code-block-container"><pre class="language-js"><code class="language-js">/** @type {import('next-sitemap').IConfig} */
module.exports = {
 siteUrl: process.env.SITE_URL || 'https://hoge.jp/',
 generateRobotsTxt: true,
 outDir: './public/fugafuga', // fugafugaディレクトリに出力するように指定
}
</code></pre></div>こちらの内容でサイトマップ生成を行うと <code>/public/fugafuga</code> の中に
<ul>
<li>robots.txt</li>
<li>sitemap.xml</li>
<li>sitemap-0.xml 
を生成してくれます。</li>
</ul>
問題はここからです。
<h1 id="robots.txt-%E3%81%A8-sitemap.xml%E3%81%8C-outdir%E3%81%AB%E9%81%A9%E3%81%97%E3%81%9F%E8%A8%98%E8%BF%B0%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84">
<a class="header-anchor-link" href="#robots.txt-%E3%81%A8-sitemap.xml%E3%81%8C-outdir%E3%81%AB%E9%81%A9%E3%81%97%E3%81%9F%E8%A8%98%E8%BF%B0%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84" aria-hidden="true"></a> robots.txt と sitemap.xmlが outDirに適した記述になっていない</h1>
見出しの通り、 robots.txtとsitemap.xmlがoutDirで指定したディレクトリを向いてくれていません。生成された記述を見てみましょう。
<div class="code-block-container">
<div class="code-block-filename-container">robots.txt</div>
<pre class="language-txt"><code class="language-txt"># *
User-agent: *
Allow: /

# Host
Host: https://hoge.jp

# Sitemaps
Sitemap: https://hoge.jp/sitemap.xml &lt;- ★ 問題はこの行です
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">sitemap.xml</div>
<pre class="language-xml"><code class="language-xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;
&lt;sitemap&gt;&lt;loc&gt;https://hoge.jp/sitemap-0.xml&lt;/loc&gt;&lt;/sitemap&gt; &lt;- ★ 問題はこの行です
&lt;/sitemapindex&gt;
</code></pre>
</div>ご覧の通り、 <code>/public</code> に生成された場合のパスを向いていることが分かります。
それぞれ問題の記述は
<code>Sitemap: https://hoge.jp/fugafuga/sitemap.xml</code> だったり、 
<code>&lt;sitemap&gt;&lt;loc&gt;https://hoge.jp/fugafuga/sitemap-0.xml&lt;/loc&gt;&lt;/sitemap&gt;</code> となっているべきです。
修正をしなければせっかく生成したサイトマップにアクセスできず、全く意味がありません。
<h1 id="%E5%95%8F%E9%A1%8C%E3%82%92%E7%84%A1%E7%90%86%E3%82%84%E3%82%8A%E8%A7%A3%E6%B1%BA%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E5%95%8F%E9%A1%8C%E3%82%92%E7%84%A1%E7%90%86%E3%82%84%E3%82%8A%E8%A7%A3%E6%B1%BA%E3%81%99%E3%82%8B" aria-hidden="true"></a> 問題を無理やり解決する</h1>
<div class="code-block-container">
<div class="code-block-filename-container">sitemap-replace.js</div>
<pre class="language-js"><code class="language-js">const replaceSitemap = async (fileName) =&gt; {
 const fs = require('fs/promises')
 const appRoot = require('app-root-path')
 const subDirectory = 'fugafuga' // ここディレクトリを変更する
 const filePath = `${appRoot}/public/${subDirectory}/${fileName}`

 const original = await fs.readFile(filePath, 'utf8')
 const replacedData = original.replace(
 /https\:\/\/hoge\.jp\/sitemap/g, // ここドメインを変更する
 `https://hoge.jp/${subDirectory}/sitemap` // ここドメインを変更する
 )

 await fs.writeFile(filePath, replacedData, 'utf8')
}

;(async () =&gt; {
 await replaceSitemap('robots.txt')
 await replaceSitemap('sitemap.xml')
})()
</code></pre>
</div>こんなJSファイルを用意しました。 
package.json の <code>postbuild</code> に <code>next-sitemap &amp;&amp; node sitemap-replace.js</code> として、サイトマップ生成後に置換されるようにしておけば解決できます。
置換後は下記のようになります。
<div class="code-block-container">
<div class="code-block-filename-container">robots.txt</div>
<pre class="language-txt"><code class="language-txt"># *
User-agent: *
Allow: /

# Host
Host: https://hoge.jp

# Sitemaps
Sitemap: https://hoge.jp/fugafuga/sitemap.xml
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">sitemap.xml</div>
<pre class="language-xml"><code class="language-xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;
&lt;sitemap&gt;&lt;loc&gt;https://hoge.jp/fugafuga/sitemap-0.xml&lt;/loc&gt;&lt;/sitemap&gt;
&lt;/sitemapindex&gt;
</code></pre>
</div><h1 id="issues%E7%AB%8B%E3%81%A6%E3%81%A6%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99">
<a class="header-anchor-link" href="#issues%E7%AB%8B%E3%81%A6%E3%81%A6%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99" aria-hidden="true"></a> issues立ててあります</h1>
果たしてこれは仕様なのかどうかは分かりませんが、せっかく生成したサイトマップが参照されなければ全く意味がありません。
この問題(?)は Github にて issues を立ててあります。（DeepL純度100%の英語）
<iframe id="zenn-embedded__adffcf634404e" src="https://embed.zenn.studio/card#zenn-embedded__adffcf634404e" data-content="https%3A%2F%2Fgithub.com%2Fiamvishnusankar%2Fnext-sitemap%2Fissues%2F581" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/iamvishnusankar/next-sitemap/issues/581" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/iamvishnusankar/next-sitemap/issues/581</a>
天才エンジニアの皆さん、ぜひプルリクエストを送って根本的な解決をしてください！（他力本願）
<h1 id="%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AA%E3%81%9C%E5%87%BA%E5%8A%9B%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8B%E3%81%AE%E3%81%8B%EF%BC%9F">
<a class="header-anchor-link" href="#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AA%E3%81%9C%E5%87%BA%E5%8A%9B%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8B%E3%81%AE%E3%81%8B%EF%BC%9F" aria-hidden="true"></a> そもそもなぜ出力ディレクトリを変更する必要があるのか？</h1>
サイトマップの保存場所を知られたくないからです。 
自分自身がスクレイピング大好きなのですが、スクレイピングする際には初手サイトマップを探します。サイトマップを見つければ大勝利です。サイト側からリンクリストを提供してくれてる訳ですから、そのリストを元にスクレイピングすればほぼ全ページ巡回できてしまいます。
サイトマップの保存場所はGoogleにだけ知ってもらえば十分です。 
Googleに知ってもらえば Yahoo!Japan でも、Bingでもちゃんと検索ヒットします。
スクレイパーたちにサイトマップの場所を知らせる必要はありません。
デフォルトのままだと <code>/sitemap.xml</code> で巡回し放題です。
そして下記の方法でpropsデータを取得できるので、低コストでスクレイピングされてしまいます。スクレイピングのハードルを少しでも上げるならディレクトリ変更をオススメします。 
僕はランダムな文字列にしています。 
<iframe id="zenn-embedded__06297314efc0e" src="https://embed.zenn.studio/card#zenn-embedded__06297314efc0e" data-content="https%3A%2F%2Fzenn.dev%2Fmasa5714%2Farticles%2F4927bbded40419" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://zenn.dev/masa5714/articles/4927bbded40419" style="display:none" target="_blank">https://zenn.dev/masa5714/articles/4927bbded40419</a>

next-sitemapでサイトマップを生成する際に気をつけたいこと【outDirは罠】

どんな問題が起きるかが分かるサンプル

robots.txt と sitemap.xmlが outDirに適した記述になっていない

そもそもなぜ出力ディレクトリを変更する必要があるのか？

Discussion