<p data-line="1" class="code-line">Astro.jsを利用していたらビルド時に下記のエラーが出ました。</p>
<p data-line="3" class="code-line">単純なエラーのはずなのですが、思ったよりハマったので備忘録を残します。</p>
<h2 id="%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9" data-line="5" class="code-line"><a class="header-anchor-link" href="#%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9" aria-hidden="true"></a> エラー内容</h2>
<p data-line="6" class="code-line">今回遭遇したエラー内容は下記です。</p>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content"><p data-line="9" class="code-line">[ERROR] [build] Failed to call getStaticPaths for /[tag]<br />
[GetStaticPathsRequired] <code>getStaticPaths()</code> function is required for dynamic routes. Make sure that you <code>export</code> a <code>getStaticPaths</code> function from your dynamic route.</p>
</div></aside>
<p data-line="13" class="code-line">このエラーに遭遇するときは、当たり前ではありますが、大抵の場合エラーメッセージにあるように <code>getStaticPaths()</code> を利用すると解決します。</p>
<p data-line="15" class="code-line">この場合だと、<code>[tag]</code> ページに <code>getStaticPaths()</code> が書いてあればいいはずです。</p>
<p data-line="17" class="code-line">ただし、今回の場合はそれが直接的な原因ではありませんでした。</p>
<h2 id="%E5%8E%9F%E5%9B%A0" data-line="19" class="code-line"><a class="header-anchor-link" href="#%E5%8E%9F%E5%9B%A0" aria-hidden="true"></a> 原因</h2>
<p data-line="20" class="code-line">ディレクトリに routing 設定をしていたのが原因でした。</p>
<p data-line="22" class="code-line">今回動的ルーティングでは下記のようなディレクトリで実行していました。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="24">src/pages/[tag]/[page].astro
</code></pre></div><p data-line="28" class="code-line">これだとタグの種類ごとに、タグ名とページ番号が表示されるのですが、1から順番に表示されるのでタグ名だけで URL を叩かれてしまうと 404 になってしまいます。</p>
<p data-line="30" class="code-line">そのため <code>[tag]</code> にリダイレクト設定をしていました。</p>
<p data-line="32" class="code-line">astro.js のリダイレクトは <code>astro.config.mjs</code> に下記のように追加します。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">astro.config.mjs</span></div><pre class="language-js"><code class="language-js code-line" data-line="34"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>

  <span class="token literal-property property">redirects</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">"/[tag]"</span><span class="token operator">:</span> <span class="token string">"/[tag]/1"</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p data-line="43" class="code-line">ですが、この設定をしているとリダイレクトから <code>[tag]</code> ページが存在されると認識されてしまい、その <code>getStaticPaths()</code> が存在しないためエラーになっていました。</p>
<h2 id="%E8%A7%A3%E6%B1%BA%E7%AD%96" data-line="45" class="code-line"><a class="header-anchor-link" href="#%E8%A7%A3%E6%B1%BA%E7%AD%96" aria-hidden="true"></a> 解決策</h2>
<p data-line="46" class="code-line">リダイレクトが原因なので、それを削除すれば解決です。</p>
<div class="code-block-container"><div class="code-block-filename-container"><span class="code-block-filename">astro.config.mjs</span></div><pre class="diff-highlight language-diff-js"><code class="diff-highlight language-diff-js code-line" data-line="48">export default defineConfig({

<span class="token unchanged language-js"><span class="token prefix unchanged"> </span> <span class="token literal-property property">redirects</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="token deleted-sign deleted language-js"><span class="token prefix deleted">-</span>
</span><span class="token unchanged language-js"><span class="token prefix unchanged"> </span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span>});
</code></pre></div><h3 id="%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%E3%81%9B%E3%81%9A%E3%81%AB-%E3%83%9A%E3%83%BC%E3%82%B8%E7%95%AA%E5%8F%B7%E3%81%AA%E3%81%97%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%80%82" data-line="57" class="code-line"><a class="header-anchor-link" href="#%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%E3%81%9B%E3%81%9A%E3%81%AB-%E3%83%9A%E3%83%BC%E3%82%B8%E7%95%AA%E5%8F%B7%E3%81%AA%E3%81%97%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%80%82" aria-hidden="true"></a> リダイレクトせずに ページ番号なしのページを表示する。</h3>
<p data-line="58" class="code-line">リダイレクトせずにページ番号なしのページを表示するには、Astro.jsの機能として<code>[...].astro</code> を利用すると実行できます。</p>
<p data-line="60" class="code-line">今回の場合は <code>[...page]</code> として下記のようにディレクトリを設定すると、ページ番号の1番目がタグ名だけになり、その後に2, 3と続くようになります。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="62">src/pages/[tag]/[...page].astro
</code></pre></div><p data-line="66" class="code-line">やはり元々 astro.js に備わっている機能を利用するべきでしたね。。。</p>
<h2 id="%E5%8F%82%E8%80%83" data-line="68" class="code-line"><a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h2>
<ul data-line="69" class="code-line">
<li data-line="69" class="code-line"><a href="https://docs.astro.build/ja/reference/api-reference/#paginate" target="_blank" rel="nofollow noopener noreferrer">Astro Documentation - Paginate</a></li>
<li data-line="70" class="code-line"><a href="https://github.com/withastro/astro/issues/8384" target="_blank" rel="nofollow noopener noreferrer">Astro GitHub Issue #8384</a></li>
</ul>


Astro.jsで[ERROR] [build] Failed to call getStaticPaths for /[XX] [GetStaticPathsRequired]の対処法