// 📆 August 19, 2020🔖 NuxtJS
結論から書くと、表題のような組み合わせでアプリケーションを作っている場合には、URL にキャメルケースを使用するのはやめて、ケバブケースにしましょうというお話です。
アプリケーション内では [URL]/fooBar
としてページを作成していたものが、 URL 直接アクセス(またはそのページでリロード)すると、なぜか[URL]/foobar/
となってしまう事象が発生してしまっていました。この事象そのものによる影響はなかったのですが、僕たちのアプリケーションでは <nuxt-child>
で画面描画をする際に不都合(画面のチラツキ)が発生してしまっていました。
そもそも、何故ローカルでは発生せず、デプロイした後だけこのような事象が発生するのか調査しました。デプロイ後のみ発生するということは、 Netlify に何か問題がありそうだなというところまで突き止めました。
Nuxt.js の SPA モードを Netlify にデプロイした場合、トップページ以外の小ページ [URL]/fooBar
にアクセスした場合、Netlify の 404 ページにリダイレクトされてしまいます。これを回避するために、nuxt.config.js
に以下のようにフォールバックの設定を行うのが一般的です。
(参考)SPA モードで生成されたサイトの場合 | Nuxt.js
export default {
generate: {
fallback: true
}
}
Chrome の Network タブで挙動を見てみると、301 でリダイレクトが発生していることが分かりました。これは、/schedule
でアクセスすると、/schedule/
にリダイレクトされているのがわかると思います。
上記のスクリーンショットでは、全て小文字の URL ですが、これが lower camel case の fooBar
みたいな URL だと、foobar/
にリダイレクトされる挙動となってしまっていました。
調べてみると、Netlify コミュニティで同じ質問をしていた方がいました。
▷ My URL paths are forced into lowercase
読み進めてみると、結論、これは Netlify の仕様であって、ユーザー側がコントロールすることはできないということが分かりました。(「詰み」を確信しました)
ということで、結局、僕たちは、ディレクトリ名をキャメルケースで命名していたのですが、これをすべてケバブケースに置き換えました。 pages/fooBar/index.vue
のようにしていたところを pages/foo-bar/index.vue
にする感じで置換作業を行いました。
ちなみに、これをアンダーバーにすると、またさらに別の問題が発生するようなので注意が必要です。アンダーバー以降の単語は、動的なパラメータとして認識されてしまうようです。
ということで結論、最初に書いた通りですが、Nuxt.js のルーティングは、キャメルケースでも、アンダーバー区切りでもなく、ハイフンつなぎのケバブケースで行いましょう。
🐌
Nuxt.js では page ディレクトリ配下のファイル・ディレクトリを読み込み、自動でルーティングを生成してくれます。便利な反面、このような隠れ仕様(今回のは Netlify 側が主原因だったけど)にも注意が必要なので気をつけましょう(自分に向けて)
🦥(筆者が喜びます)
🔖 NuxtJS