存在しないはずのページにアクセスできてしまう

Question

前提

• Next.jsで動的なページを生成しています。
• 下記のURLのページがあります。

/{userID}/page/{pageID}

上記URLのパラメーターは、それぞれ下記の仕様です。

• {userID}：任意の文字列、変更可
• {pageID}：自動で生成される文字列、変更不可

ディレクトリ構造は下記の通りです。

.
└── pages
    └── {userID}
        ├── [userID].tsx // ユーザーの情報が確認できるページです。誰でもアクセス可能です。
        ├── userSettings.tsx // userIDを変更できるページです
        └── page
            └── [pageID].tsx

発生している問題

{userID}が存在しない文字列でも、ページにアクセスできてしまいます。

• {userID} = foo
• {roomID} = bar

例えばURLのパラメーターが上記の場合、下記の挙動になります。

• /foo/page/barにアクセス→正しいページを表示
• /baz/page/barにアクセス→正しいページを表示
• /foo/page/bazにアクセス→404ページを表示

{pageID}が存在しない場合のみ404ページが表示されました。

---

ただし、存在しない{userID}の場合、ユーザー情報を確認できるページにアクセスすると、404ページが表示されました。

上記のパラメーター例においては、下記の挙動になります。

• /baz/page/barにアクセス→正しいページを表示
• /baz/にアクセス→404ページを表示
• /foo/にアクセス→正しいユーザー情報確認ページを表示

---

上記の挙動から、末尾の動的パラメーターが存在していれば、間の動的パラメーターの整合性は問わず動的ページが表示できる、という状態になっているかと思います。

実現したいこと

{userID}と{roomID}の両方が存在する場合のみ、正しいページを表示し、それ以外の場合は404ページを表示したいです。

• {userID} = foo
• {roomID} = bar

例えばURLのパラメーターが上記の場合、下記の挙動にしたいです。

• /foo/page/barにアクセス→正しいページを表示
• /baz/page/barにアクセス→404ページを表示
• /foo/page/bazにアクセス→404ページを表示

---

{userID}と/page/を除いてrootの次に{pageID}にすれば解決できそうですが、TwitterのツイートのURLと同じように、/可変ID/固定値/不変ID/という構成にして、このユーザー/が持つページの内、/このページという意味付けでURLを設定したいです。

試したこと

上記の問題点のある挙動はlocalhostで確認したものだったので、試しにデプロイして確認してみましたが、挙動に変化はありませんでした。