Next.jsでネストしたルーティングの場合のディレクトリ構造が分かりません

Question

実現したいこと

/users/1/rooms/1のように2つの動的なルーティングの作る時にroomはどこに置くのか、2つの動的ルーティングを実現する為のコードが知りたいです。(または、参考サイト)

現在のコード

pages
|- users
  |- [uid].tsx

const router = useRouter();
const { uid } = router.query;

//roomはこう当てはめるかなという感じで書いています。
{rooms.map((room) => {
  return (
    <Link href={`/users/${uid}/rooms/${room.id}`} key={room.id}>
      <a>{room.title}</a>
    </Link>
  );
})}

リンクは/users/1/rooms/1などに飛んでくれますが、not foundでページがない状態なのでどこかにroomディレクトリとそのファイルを置かなければいけませんが、置く場所が分からず、困っております。

知見のある方のお力をいただきたいです。よろしくお願いします。

追記

最新のディレクトリ構成

users
    └── [userId]
        ├── index.tsx
        └── rooms
            └── [roomId].tsx

Comments

[gouf]

他のひとの回答、ヒントを待ちたいですが; たとえば わたしのこのコミット (空ファイルの設置と 設置 path に注目) のようにした場合、参考にした場合、何か変化は見られますか? : https://github.com/gouf/nuxt_js_hello_demo/commit/7e45e7e1d814e4a3a4095caf19190d4ad27b42b4

[nabe_R]

ご返信ありがとうございます！
ディレクトリ構成はこんな感じのイメージでしょうか？
([uid].tsxとroomsが同じ階層です)
もしこのイメージ通りであれば、試してみましたが、変化はありませんでした。
```
- pages
|-users
|- [uid].tsx
|- rooms
|- [rid].tsx
```

[gouf]

underscore 付きのファイルを設置することで その部分に関しては動的割り当てが可能になるみたいです : https://ja.nuxtjs.org/docs/2.x/features/file-system-routing/#%E5%8B%95%E7%9A%84%E3%81%AA%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0

[nabe_R]

大変恐縮ですが、こちら、NextとNuxtの見間違いではないでしょうか？

[gouf]

見間違い、してますね。申し訳ないです

[nabe_R]

解決にお力を貸していただきありがとうございました！
無事に解決策が分かりましたのでお伝えさせていただきました！
力を貸せる側になれるよう頑張ります。

Answer 1

こちらの例にあるようにpages/post/[id]/[comment].jsというディレクトリ構成にすることができます
今回の場合はpages/users/[userId]/rooms/[roomId].jsだと思います
https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing

Comments

[nabe_R]

ご回答ありがとうございます！

公式を見て自分のディレクトリ名と構成に落とし込もうとすると分からなくなっていたので、
【今回の場合はpages/users/[userId]/rooms/[roomId].jsだと思います】
こちらのおかげで理解することができました！ありがとうございます。

ディレクトリ名がこれでいいのか少し不安なので、もしよろしければ追記に書きますので見ていただけませんか？

BA回答に今の時点でしたいのですが、やりとりができなくなるのか分からないので保留させていただきます。(BA後もやりとりできそうと判明したらBAにいたします。)

[mikan3rd]

追記にあるディレクトリ構成で良いと思います！

[nabe_R]

追加質問までご丁寧に対応してくださり本当に助かりました！
最後までご対応していただきありがとうございました！