こんにちは！トレイリングスラッシュってかっこいいね。Mizutani(@sirycity)です。必殺技みたいな。

今回はNext.jsのトレイリングスラッシュの設定と、404.tsxみたいな404ページがfirebaseとかnetlifyで機能しなくなる方法の対策についてです。

はじめに

Next.jsのトレイリングスラッシュの設定は超簡単で、next.config.jsに1行足すだけ。

module.exports = {
  trailingSlash: true,
}

こんだけ。

トレイリングスラッシュの設定について

どういうときに設定するのか

nextではSSG(静的サイト生成)で動的URLを使ってる場合にトレイリングスラッシュを設定する必要があります。ややこしいね。簡単に言うと、npm run exportってコマンドがあって[foo].tsxみたいなディレクトリがあるなら設定が必要。

なぜ設定するのか

このページを例にした場合、トレイリングスラッシュを設定しないとURLがjsnotice.com/posts/2021-04-11.html みたいになる。ちょっと不格好。なぜならpostsってディレクトリの中に2021-04-11.htmlってファイルができてるから。jsnotice.com/posts/2021-04-11って書きたい所だけど、これだと拡張子がなくて2021-04-11.htmlなのか2021-04-11.phpなのか2021-04-11.pngなのか分からんからエラーになる(ここちょっと怪しい)。

そこでnextのトレイリングスラッシュはfoo/bar.htmlをfoo/bar/index.htmlに変換する。今回の例だとposts/2021-04-11.htmlがposts/2021-04-11/index.htmlになる。この時点でjsnotice.com/posts/2021-04-11/index.htmlでアクセスできるようになる。

加えて、webの仕様でスラッシュで終わっている場合は末尾にindex.htmlが付いているものとするってのがあるので(ここもちょっと怪しい)、jsnotice.com/posts/2021-04-11/でもアクセスできるようになる。

最後に、webサーバーの仕様でfooに何もなかったらfoo/index.htmlを探しに行くってのがあるので(ここもやっぱり怪しい)、jsnotice.com/posts/2021-04-11でもアクセスできるようになる。

こんな感じ。お前もあんま分かっとらんやんけ

設定することで起こる問題について

んで、ここからが本題なんですがトレイリングスラッシュを設定すると一部のホスティングサービスでは404ページが機能しなくなる現象が起こります。

404ページとは

404ページってのは無効なURLを踏んだ場合に出すページ。

nextjsの404について

nextは404.tsxみたいなページを作れます。ただちょっと癖があるのは、SSRモードだとちゃんと404として機能させれるんだけどSSGだと単なる404って名前のページってことです。別に404って名前にしたから特殊な挙動になるわけでもなく、ただのjsnotice.com/404って名前のURLになるってこと。

404リダイレクトについて

404はただの名前って話をしたけど、じゃあなんで無効なURLを踏むと404に行くかっていうと内部的にリダイレクトしているからです。firebaseやnetlifyはもう最初から404.htmlってファイルがルートにあったら無効なURL踏んだときにそこにリダイレクトするって決まりがあるわけです。

問題

もうお分かりでしょうか、リダイレクトは404.htmlがあったら...ってルールです。しかしトレイリングスラッシュを設定していると404.html が 404/index.htmlに勝手に変更されてしまいます。だから404の設定が無効になっちゃう。

解決策

解決策はシンプルで、ビルドし終わった後に404/index.htmlを404.htmlに変えればok。nextの場合はビルド後のファイルはoutディレクトリに入るので、こんな感じ。

cp out/404/index.html out/404.html

最後に

404は無効になってても気づきにくい...テストフレームワークとかanalyticsとかで気づけないし。