DEV Community

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

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...
Collapse
 
mfp22 profile image
Mike Pearson • 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...

Collapse
 
mattferrin profile image
Insight Lighthouse • 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.

Collapse
 
josemukorivo profile image
Joseph Mukorivo • 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?

Collapse
 
mfp22 profile image
Mike Pearson

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.

Collapse
 
mfp22 profile image
Mike Pearson

Great article otherwise

Collapse
 
romeerez profile image
Roman K

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.

Collapse
 
josemukorivo profile image
Joseph Mukorivo

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

Collapse
 
r4e profile image
Richie Permana

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

Collapse
 
romeerez profile image
Roman K

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

Thread Thread
 
r4e profile image
Richie Permana

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

Collapse
 
cmcnicholas profile image
Craig McNicholas

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.

Collapse
 
josemukorivo profile image
Joseph Mukorivo

Thanks Craig, automated pipeline for PR's is a good addition.

Collapse
 
escnor profile image
Naveen • Edited

"If you are using CSS" what do you think is the best alternative?
Thanks Nice expalnation. Saved.

Collapse
 
josemukorivo profile image
Joseph Mukorivo

Hi Naveen, for me I use tailwindcss most of the time. I have also tried CC-in-JS solutions, they were good but i find tailwind to be much faster.

Collapse
 
escnor profile image
Naveen

Thanks for replying

Collapse
 
nicolasdanelon profile image
Nicolás Danelón

bro! wow! awesome

Collapse
 
josemukorivo profile image
Joseph Mukorivo

Thanks bro, glad you liked it.

Collapse
 
sip profile image
Dom Sipowicz

very impressive read!

Collapse
 
josemukorivo profile image
Joseph Mukorivo

Thanks Dom

Collapse
 
danielgree profile image
Daniel Green

Next.js is a powerhouse, and your wisdom on frontend architecture is truly inspiring. Follow @danielgree

Collapse
 
josemukorivo profile image
Joseph Mukorivo

Thanks Daniel.

Collapse
 
samucadev profile image
SamucaDev

Great post!

Collapse
 
josemukorivo profile image
Joseph Mukorivo

Thanks SamucaDev

Collapse
 
only1adams profile image
Adams Muhammed

I use most of the tools here .. glad to know I been following the best practices.. this is an amazing article anyways 💡

Collapse
 
josemukorivo profile image
Joseph Mukorivo

Thanks Adams

Some comments have been hidden by the post's author - find out more