Next.js

As per the documentation, the pages/ directory holds the React components which describe the distinct pages of the application. The modules required by each of these pages are split into their own bundles in order to optimise download size and performance.

The components/ folder contains the React components which are used by the pages/ components. Components which are used only by another specific components should appear within that Component's directory, under a components/ directory.

For example, The Sidebar component is only used by the Nav component, so it is located inside the Nav/components/Sidebar/ directory.

This structure has been inspired by Alexis Mangin's excellent article on structuring scalable React.js applications. Give it a read if you're confused 📕