DEV Community

How I approach and structure Enterprise frontend applications after 4 years of using Next.js

Joseph Mukorivo on September 09, 2023

Introduction In the fast-paced world of frontend development, staying ahead of the curve is essential for building successful enterprise...

Read full post

Mike Pearson • Sep 11 '23 • Edited

types is a terrible folder to have. Your folder structure should reflect your features, not the technologies they use. I wrote an article about this dev.to/mfp22/why-your-folder-struc...

Insight Lighthouse • Sep 14 '23 • Edited

This comment stood out to me because I created a types folder despite hating it only to politely act on code review comments of someone out of office. Because of a policy to resolve every code review comment.

But absolutely yes to the idea of grouping by feature first.

Joseph Mukorivo • Sep 11 '23 • Edited

Thanks for the feedback Mike, I agree folders should reflect features but I think it makes sense to put some global types in folders like types. If you have a type like User that is used accross the entire app it might make sense to put it here but other types like Product for example can stay in their respective modules/features. What do you think?

Mike Pearson • Sep 11 '23

User should be in a folder called user. Who says you can't import features into other features? We do that all the time.

I have never seen an example of a type that belonged in a global types folder. I actually think of types as the foundation for the folder structure, since they are the foundation of each feature.

Mike Pearson • Sep 11 '23

Great article otherwise

Roman K • Sep 13 '23

Why put Next.js in title and promise to tell us about structuring, but not saying a word about the Next's app directory? App directory makes a big difference.

Joseph Mukorivo • Sep 13 '23

Yes but a lot of NextJS projects are still on v12. For the app directory I recommend looking for somethings that says Next 13.

Richie Permana • Sep 15 '23

This is basically a good example of your own expectation kills you.

Roman K • Sep 15 '23

Just an example of a misleading title. It doesn't kill you, nor makes you stronger.

Richie Permana • Sep 18 '23

It's not even close to your so-called "misleading title". You're just assuming the OP is gonna talk about the present Next.js which is the 13 version. When in fact, there's nowhere about its gonna talked about latest Next.js.

ouch

Craig McNicholas • Sep 11 '23

This was good and actually transfers a lot. We are Vue based but a lot of what's identified here can be applied to other projects e.g. we have an Nx monorepo, separation of projects by lib, microfrontend, UI, apps, TypeScript first, TDD, strong lining and naming conventions, document your conventions etc.

One thing I'd add to the above is a strong automated pipeline for PR's. When you have big long term projects those things save so much time.