organizationproject-organization

React Folder structure question regarding Features


I know this has been asked to death, but I always like to make my life as easy as possible, and I know this somewhat comes down to a bit of personal preference and also depends upon the size of the project.

I recently saw a WDS video: https://www.youtube.com/watch?v=UUga4-z7b6s where he talks about folder structures, and I really like it.

My question comes down to this 'Features' directory in the advanced directory, unfortunately he doesn't give a code example but from what he (and another website I found that have a similar practice https://profy.dev/article/react-folder-structure#discussion-feature-driven-folder-structure-and-screaming-architecture) describes, the features directory is basically the code for the page, i.e. all the logic, rendering, etc you name it sit in there, and the actual page itself.

So far I follow along and it makes sense, however, this is where the confusion is, I have a large project I'm working on, and if I take for example the Registration page, I have a folder structure like this (note I'm using NextJS as well):

enter image description here

Now if I were to move all of that to a features folder, does that mean I'd not just have a file called 'register.tsx' with basically the following:

import Registration from 'features/registration';

export default Page() {
    return <Registration />
}

Other than just having a simple pages folder, this feels redundant to me.


Solution

  • that seems to be bit redundant indeed! When you watch videos like the one from WDS you linked above, you always have to keep in mind that not all folder structures work as good for every type of project.

    Since the folder structure needed for the NextJs page directory already is feature/page based, it's totally fine to not use a features folder and just only use the pages folder. This way you mitigate redundant work 'just to have a features folder for the sake of having one'.