Nuxt.js + Netlify でページを再読み込みすると CamelCase の URL がすべて LowerCase に変換されてしまう問題でハマった

// 🙎‍♂️ Yuji Tsuburaya📆 August 19, 2020🔖 NuxtJS

Photo by Gabriel Crismariu on Unsplash
Photo by Gabriel Crismariu on Unsplash

結論から書くと、表題のような組み合わせでアプリケーションを作っている場合には、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/ にリダイレクトされているのがわかると思います。

/schedule ページでリロードしたときの挙動
/schedule ページでリロードしたときの挙動

上記のスクリーンショットでは、全て小文字の URL ですが、これが lower camel case の fooBar みたいな URL だと、foobar/ にリダイレクトされる挙動となってしまっていました。

調べてみると、Netlify コミュニティで同じ質問をしていた方がいました。

My URL paths are forced into lowercase

https://community.netlify.com/t/my-url-paths-are-forced-into-lowercase/1659

読み進めてみると、結論、これは Netlify の仕様であって、ユーザー側がコントロールすることはできないということが分かりました。(「詰み」を確信しました)

対応

ということで、結局、僕たちは、ディレクトリ名をキャメルケースで命名していたのですが、これをすべてケバブケースに置き換えました。 pages/fooBar/index.vue のようにしていたところを pages/foo-bar/index.vue にする感じで置換作業を行いました。

ちなみに、これをアンダーバーにすると、またさらに別の問題が発生するようなので注意が必要です。アンダーバー以降の単語は、動的なパラメータとして認識されてしまうようです。

結論

ということで結論、最初に書いた通りですが、Nuxt.js のルーティングは、キャメルケースでも、アンダーバー区切りでもなく、ハイフンつなぎのケバブケースで行いましょう。

🐌

Nuxt.js では page ディレクトリ配下のファイル・ディレクトリを読み込み、自動でルーティングを生成してくれます。便利な反面、このような隠れ仕様(今回のは Netlify 側が主原因だったけど)にも注意が必要なので気をつけましょう(自分に向けて)

シェアしてくれたら喜びます 💁‍♀️

広告

書いた人

___35d

Yuji Tsuburaya (@___35d

👩‍💻 Frontend Engineer

🏢 J-CAT CTO Co-Founder / ex. BizReach

🎨 by @ch1ch1ch1_123

💚 Minimalism / Notion / Figma

📱 Author of @FastNotion

詳しいプロフィールはこちら

広告