title: Is this Next.JS folder structure recommended?
body: <p>We have resorted to this following project structure</p>
  
  <pre><code>|- pages
      |- &lt;page_name&gt;
          |- index.js             # To do a default export of the main component
          |- MainComponent.jsx    # Contains other subcomponents
          |- main-component.css   # CSS for the main component
          |- OtherComponents.jsx  # more than 1 file for child components that are used only in that page
          |- __tests__            # Jest unit and snapshot tests
  |- components
      |- index.js                 # Exports all the default components of each component as named exports
      |- CommonCmpnt1
          |- CommonCmpnt1.jsx
          |- common-cmpnt-1.css
          |- index.js             # To default export the component
          |- __tests__
      |- CommonCmpnt2
          |- CommonCmpnt2.jsx
          |- common-cmpnt-2.css
          |- index.js             # To default export the component
          |- __tests__
  </code></pre>
  
  <p>To clarify, nothing has broken and it works amazingly well. We have components that are reused in multiple pages inside the <code>components</code> directory, where we import as follows</p>
  
  <pre><code>// Assuming we are inside MainComponent.jsx
  // ...
  import { CommonCmpnt1 } from '../../components';    // We even take it a step further and use absolute imports
  </code></pre>
  
  <p>Also, components that are used only once reside side-by-side in it's <code>pages</code> folder.</p>
  
  <p><strong>The only problem we face now is</strong> the Hot Module reloading is broken, i.e. whenever we edit the <code>.jsx</code> file inside either the <code>pages</code> or the <code>components</code> directory, we have to manually reload the page to see effected changes (It doesn't affect the CSS files). It is something that we've grown accustomed to and so doesn't affect us seriously.</p>
  
  <p>My question is, is there any impending catastrophe that we do not know of?</p>