What is the correct folder structure for dynamic nested routes in Next.js?

Question

I've been going over the Next.js docs and think I understand the [slug].js dynamic routing process, but I struggling to understand nested dynamic routes in terms of folder structure.

If I want to make a user based application, how would I achieve /user/[userid]/post/[postId]?

And a would like something like this:

 user
 - [id].js // e.g. user/1
 - [userId]
 - - post
 - - - [postId].js // e.g. user/[userId]/post/[postId]

But this throws an error about [slugs] as I think you can't have two slugs in the same folder.

Can anyone explain the correct folder structure to achieve this? Any help with be greatly appreciated.

Answer 1

Instead of [id].js create an file named index.js in [userId] folder which will be used to render the page for route path /user/[userId]/.

pages/
 user/
  [userId]/
    - index.js        // will match for /user/1234
    post/
      - index.js      // will match for /user/1234/post
      - [postId].js   // will match for /user/1234/post/some-post

Similarly creating an index.js under folder post will be useful to match for route path /user/[userId]/post/ which can be used show a list for post for that user.

An example with a folder structure for a similar use case.