We have resorted to this following project structure
|- pages
|- <page_name>
|- 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__
To clarify, nothing has broken and it works amazingly well. We have components that are reused in multiple pages inside the components directory, where we import as follows
// Assuming we are inside MainComponent.jsx
// ...
import { CommonCmpnt1 } from '../../components'; // We even take it a step further and use absolute imports
Also, components that are used only once reside side-by-side in it's pages folder.
The only problem we face now is the Hot Module reloading is broken, i.e. whenever we edit the .jsx file inside either the pages or the components 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.
My question is, is there any impending catastrophe that we do not know of?
Stumbled upon this post while searching for a suitable folder structure for NextJS myself. I've been using a similar structure but recently found that this is not how you're suppose to use NextJS.
I don't know too much about the details, but NextJS has optimizations at the page level. When you build a NextJS project, you will see the pages logged as part of the build. NextJS treats every component file under the pages folder as a page, so by placing non-page components in the pages folder, you are drastically increasing build time because now NextJS goes and builds every one of those components as a page.
I like the structure proposed in this article
/root
\_ /.next/
\_ /components/
\_ Button/
\_ button.spec.jsx
\_ button.styles.jsx
\_ index.jsx
\_ /constants/
\_ theme.js
\_ page.js
\_ /contexts/
\_ Locale/
\_ index.js
\_ Page/
\_ index.js
\_ /pages/
\_ _app.jsx
\_ _document.jsx
\_ about.jsx
\_ index.jsx
\_ /providers/
\_ Locale/
\_ index.js
\_ Page/
\_ index.js
\_ /public/
\_ favicon.ico
\_ header.png
\_ /redux/
\_ actions/
\_ users/
\_ index.js
\_ products/
\_ index.js
\_ reducers/
\_ users/
\_ index.js
\_ products/
\_ index.js
\_ store/
\_ index.js
\_ types/
\_ index.js
\_ /shared/
\_ jsons/
\_ users.json
\_ libs/
\_ locale.js
\_ styles/
\_ global.css
\_ /widgets/
\_ PageHeader/
\_ index.jsx
\
\_ .eslintignore
\_ .eslintrc
\_ .env
\_ babel.config.js
\_ Dockerfile
\_ jest.config.js
\_ next.config.js
\_ package.json
\_ README.md
To all who are still interested in this, I personally recommend this approach due to the fact that it helps compartmentalize resources and allows for quickly finding things and unit testing.
It was inspired by an article by HackerNoon on How to structure your React app