What is the correct folder structure in Next.js for routes with query parameters?

Question

Next.js already documents correct usage of nested api's in their documentation here but one thing not covered there is the usage of query parameters. I have two routes. First one is mysite.com/posts which displays all the posts. Other one is mysite.com/posts?id=12 where you only get to see that specific post. What could be the correct folder structure to place my js file in there?

Right now the folder structure I have is :

pages -- folder
 posts -- folder
  [id].js -- file
  index.js -- file

Even though I have a feeling that this should be the correct way it doesn't work. Whenever I hit mysite.com/posts?id=12 I get mysite.com/posts and never get to see the page with the id. Any idea on what am I doing wrong here?

question from:https://stackoverflow.com/questions/66065433/what-is-the-correct-folder-structure-in-next-js-for-routes-with-query-parameters

Answer 1

You need to pass query parameter as per your folder structure i.e mysite.com/posts/12

As per documentation,Any route like /post/1, /post/abc, etc. will be matched by pages/post/[id].js. The matched path parameter will be sent as a query parameter to the page, and it will be merged with the other query parameters.

For example, the route /post/abc will have the following query object:

{ "id": "abc" }

Similarly, the route /post/abc?foo=bar will have the following query object:

{ "foo": "bar", "id": "abc" }

However, route parameters will override query parameters with the same name. For example, the route /post/abc?id=123 will have the following query object:

{ "pid": "abc" }