React folder structure

Hello people, I wanted to share my current folder structure for my React projects, after some time this is it:

.
├── package.json
├── jsconfig.json
├── public/
└── src/
    ├── assets/
    ├── components/
    └── pages/

components: Any component that don't belong to the pages should live here.

pages: Components living in this folder should map to a url. This is useful because if you want to move to Next.JS, there's not much needed to be done. This folder can have sub folders, if you are using reach-router, it fits perfectly.

assets: This folder is optional, it may include things as images, or any other static file that you'd like to put there, depending on the size of the app, the static content can also live next to each component, so it's not that needed.

And the jsconfig.json can have this content:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "pages": ["./src/pages/*"],
      "cards": ["./src/cards/*"],
      "components": ["./src/components/*"]
    }
  },
  "exclude": ["node_modules", "build", "coverage", "dist", "lib"]
}

So my question is, what do you think? Would you change it to something different?

Cheers

Comments

[EgoistDeveloper]

I decided move to nextjs from basic react project but I did not use pages folder before. Nextjs requires pages folder for routing mechanizm. Now I spent one week for this migration. If you are planing work with nextjs you should consider twice otherwise it means waste of time and cost.

[Santiago]

Yeah, it's just optional, sometimes it fits, sometimes it doesn't

[Seanmclem]

If you have components that are pretty specific to a certain page -do you usually put them in a component folder within the page folder? Or always separately in the main components folder?

[Santiago]

Is up to you how much flexibility you wanna have on your conventions. In my case a component related to a page only, can live inside that page folder. Because moving to the components folders it's actually super easy in case you have to.

For example you could have a folder Home where the Home/index.js exposes the full Home component, and inside there a Home/Clock.js component. If you need to reuse clock, it can be moved to components and you'd only have to update you Home to use the clock in components. It's a cheap refactor