【JS】Next.jsのトレイリングスラッシュの設定と404ページが機能しない時の対策
こんにちは!トレイリングスラッシュってかっこいいね。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とかで気づけないし。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介