title: What is the correct folder structure in Next.js for routes with query parameters?
body: <p>Next.js already documents correct usage of nested api's in their documentation <a href="https://nextjs.org/docs/routing/dynamic-routes" rel="nofollow noreferrer">here</a> but one thing not covered there is the usage of query parameters. I have two routes. First one is <code>mysite.com/posts</code> which displays all the posts. Other one is <code>mysite.com/posts?id=12</code> where you only get to see that specific post. What could be the correct folder structure to place my js file in there?</p>
  <p>Right now the folder structure I have is :</p>
  <pre><code>pages -- folder
   posts -- folder
    [id].js -- file
    index.js -- file
  </code></pre>
  <p>Even though I have a feeling that this should be the correct way it doesn't work. Whenever I hit  <code>mysite.com/posts?id=12 </code> I get <code>mysite.com/posts</code> and never get to see the page with the <code>id</code>. Any idea on what am I doing wrong here?</p>