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

公開日:

2024-07-26

Astro.jsを利用していたらビルド時に下記のエラーが出ました。

単純なエラーのはずなのですが、思ったよりハマったので備忘録を残します。

エラー内容

今回遭遇したエラー内容は下記です。

このエラーに遭遇するときは、当たり前ではありますが、大抵の場合エラーメッセージにあるように getStaticPaths() を利用すると解決します。

この場合だと、[tag] ページに getStaticPaths() が書いてあればいいはずです。

ただし、今回の場合はそれが直接的な原因ではありませんでした。

ディレクトリに routing 設定をしていたのが原因でした。

今回動的ルーティングでは下記のようなディレクトリで実行していました。

src/pages/[tag]/[page].astro

これだとタグの種類ごとに、タグ名とページ番号が表示されるのですが、1から順番に表示されるのでタグ名だけで URL を叩かれてしまうと 404 になってしまいます。

そのため [tag] にリダイレクト設定をしていました。

astro.js のリダイレクトは astro.config.mjs に下記のように追加します。

astro.config.mjs

export default defineConfig({

  redirects: {
    "/[tag]": "/[tag]/1",
  },
});

ですが、この設定をしているとリダイレクトから [tag] ページが存在されると認識されてしまい、その getStaticPaths() が存在しないためエラーになっていました。

リダイレクトが原因なので、それを削除すれば解決です。

astro.config.mjs

export default defineConfig({

  redirects: {
-
  },
});

リダイレクトせずにページ番号なしのページを表示するには、Astro.jsの機能として[...].astro を利用すると実行できます。

今回の場合は [...page] として下記のようにディレクトリを設定すると、ページ番号の1番目がタグ名だけになり、その後に2, 3と続くようになります。

src/pages/[tag]/[...page].astro

やはり元々 astro.js に備わっている機能を利用するべきでしたね。。。