個人プロジェクト「Hubpin」を開発する筆者が、Next.js App Routerで遭遇した不具合をZennで綴っています。/dashboardにアクセスしても404エラーにならず、公開ユーザーページの表示に「@dashboard」と出てしまうという現象に遭遇したとのことです。「[username] は文字列なら何でも受け取るので、404 になるほうがおかしい。」と振り返っています。
原因は、動的ルート[username]がファイルシステムに存在しない任意の文字列パスにもマッチしてしまうことでした。静的ルートは動的ルートより先に解決される性質を利用し、src/app/dashboard/page.tsxを作成することで解決したそうです。
さらにこの現象から、ユーザーがdashboardやloginなどアプリの予約語をユーザー名として登録できてしまうと、該当ページが永久に表示されなくなるという設計上の問題も判明しました。対策として、PostgreSQLのCHECK制約（テーブルに登録できる値の条件を指定するデータベースの機能）に予約語リストを設定し、登録経路によらず無効化するようにしたとのことです。
出典が伝えている要点
- 筆者が開発中のプロジェクト「Hubpin」で、/dashboard にアクセスすると404エラーではなく、公開ページのユーザー名表示部分に「@dashboard」と表示される現象が発生した
- この現象の原因は、Next.js App Routerの動的ルート[username]がファイルシステムに存在しない任意の文字列パスにマッチし、/dashboardが「usernameが'dashboard'のユーザーページ」として解決されたことである
- src/app/dashboard/page.tsxを作成することでこの現象は解決した
- ファイルシステム上の静的ルートは動的ルートより先に解決されるため、静的ページを作成すると動的ルートより優先される
- この現象から、ユーザーがdashboardやloginなどアプリケーションの予約語をユーザー名として登録できてしまうと、該当ページが永久に表示されなくなるという設計上の問題が判明した
- 対策として、PostgreSQLのCHECK制約にabout, dashboard, login, api, auth, _next, faviconなどを含む予約語リストを設定した
- このCHECK制約により、登録経路に関わらずユーザー名として予約語が使われることを無効化できる
原文より
[username] は文字列なら何でも受け取るので、404 になるほうがおかしい。
出典: zenn.dev