React Folder structure question regarding Features

Question

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):

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.

Wesley Janse · Accepted Answer · 2023-02-07 20:31:46Z

1

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'.

answered Feb 7, 2023 at 20:31

Wesley Janse

1,8642 gold badges9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Folder structure question regarding Features

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related