DEV Community

Cover image for How to Build Scalable Architecture for your Next.js Project

How to Build Scalable Architecture for your Next.js Project

Alex Eagleson on April 06, 2022

All code from this tutorial as a complete package is available in this repository. If you find this tutorial helpful, please share it with your fr...
Collapse
 
chanintornr profile image
Chanintorn

Great article, I love that.
And I vote in 2 topics.

  1. How to manage multiple applications in a monorepo with Next.js and Nx

  2. How to add a global state manager to your Next.js app with Recoil

Thank very much

Collapse
 
alexeagleson profile image
Alex Eagleson • Edited

Hey that's great! I appreciate someone picking up on the part at the end about future follow-ups. Definitely plan to make it happen.

I think right now one of the biggest challenges on the monorepo topic isn't even setting it up -- it's coming up with a good little scenario/example to show WHY you would want to use the monorepo, without being too complex, but also being a bit more real-world than just the "hello world" packages that the basic tutorials use.

Collapse
 
chanintornr profile image
Chanintorn

I agree, In my current project I decided to do mono repo and I still ask my self until now why I need to do this approach.

In my case I have 5 website (next js) that share ui-lib and backend.

And I think maybe it easy to communicate with team and track dependencies version (ui-lib) if I apply monorepo.

But now I’m not sure about it lol 😅

Collapse
 
frosty21 profile image
Nathan Froese

Very well done article didn't think of using @commitlint config on top of husky for defining commits I will have to use that cheers (it's a good additional way to subcategorize jira tickets).
Love also that the article goes into future follow-ups.

Without going into too much detail of reasons for monorepo would be a compact dev team working on a project that has the potential to scale large quick for example skipthedishes (delivery team, customer ordering team, UI/UX team, BE team...). If your trying to run the CICD on multiple repos and then there is a issue on one of the repos that you don't have access to on a friday night, that could be a huge problem that could of been simply resolved from having a monorepo. You include temporary locks within the user repo by default so they don't accidentally do any changes they shouldn't do on a work week and only allow changes of a file during deploy stage to production when a error occurs.
Another reason why for monorepo I think would be security having centralized info to significantly reduce the chance of a backdoor to access. If your seperating your concerns in a monorepo it can be very powerful but ultimately it depends on the business case for the product.

Collapse
 
alexeagleson profile image
Alex Eagleson • Edited

Nice, I totally agree..

I do work with different styles of monorepos for a few different clients and the one thing I absolutely always find is that a lot of the challenges end up really distilling down to business and organizational decisions rather than technical ones.

It's a balance between the convenience of having a central source of truth on versioning and maintaining separation of the individual packages/apps that sometimes developers can be contracted to contribute to but are not meant to have visibility on the larger ecosystem.

I will say that the idea of file locks on specific parts of the monorepo is new to me, do you have any more info or sources on that? My practice recently has been to handle those pieces as git submodules so that devs can be given specific access to those pieces individually and project leads can manage the monorepo, but of course submodules come with their own set of challenges.

Either way I appreciate the detailed response. Cheers.

Collapse
 
frosty21 profile image
Nathan Froese

Personally I haven't done file locks and am not too familiar i think with GitHub enterprise you could use git LFS but I was thinking initially to set authorization through a seperate PSQL prisma model database instance on either locally generated with LFS or online to check within the husky file (will probably be years till i get there).

Just looking at Apollo graphql fed and having subgraphs/schemas and gateway to have separation of concerns is pretty cool for performance while still having that monrepo feel. Still in the monorepo realm but what apollo fed has to offer is going to become interesting. especially when you have one graph it can't become performant for the certain graphs you need from the start.

Collapse
 
shupsta profile image
Shupsta

Hey! Thank you so much for this tutorial! I just wanted to share that there appears to be a problem when usng NExt 12.1.5 regarding the Next Image component that the storybook.preview work around given did not fully address.

This did seem to work though!

github.com/vercel/next.js/issues/3...

Collapse
 
alexeagleson profile image
Alex Eagleson • Edited

Ah, I did see some notes from the devs that they seem to be doing some heavy work on the Image component recently to try and fix some of the issues around it, so I'm not surprised this has happened

Thanks for passing along the fix!

Collapse
 
egolegegit profile image
egolegegit

Great guide! already started using nextjs, but some aspects were chaotic. Now everything is in place! thank you very much!

Collapse
 
alexeagleson profile image
Alex Eagleson

Very welcome!

Collapse
 
tyler_beggs_c97e0527f4e97 profile image
Tyler Beggs

Amazing, your best work yet.

Collapse
 
lathindu1 profile image
Lathindu Pramduitha

This is awesome. tyvm sharing your knowladge

Collapse
 
timhuang profile image
Timothy Huang

A Very useful step-by-step tutorial to start a next.js project. There are many useful utilities to the next.js project. Thanks for sharing. Great job.

Collapse
 
waqar profile image
Waqar Ahmed

Great article, practical and detailed. I am now starting my first Next.js project. I've only used the LAMP stack in the past. I will use this article as a reference.

Collapse
 
alexeagleson profile image
Alex Eagleson

You're definitely in for a treat.

Nice thing is a lot of the fundamentals from the LAMP stack are things that people who have moved from React single page app's to Next actually have to learn from scratch (server side page generation etc) so you'll be able to hold over a lot of the same principles, just with a different syntax.

Collapse
 
strlrd29 profile image
Ghribi Ouassim

Best Next.JS article I have ever read.

Collapse
 
guk profile image
DoGukKim

Hello, Alex I`m korean.
I m Impressed this Article, love it!
Thank u.
I vote in 2 topics.

  1. How to add a global state manager to your Next.js app with Recoil.
  2. How to implement SSO authentication and internationalization in a Next.js app using NextAuth and i18next
Collapse
 
jwilliams profile image
Jessica williams

Great article! Building a scalable architecture for a Next.js project is crucial for its success. One essential aspect is hiring a skilled Node.js developer. They will play a vital role in implementing efficient server-side rendering, optimizing API integrations, and handling data management. By hiring a proficient Node.js developer, you can ensure that your Next.js project's backend is robust, scalable, and capable of handling high traffic and demanding workloads. Keep up the excellent work!

Collapse
 
piratex profile image
Chhay Toch

It's not working anymore if we use the latest of the storybook

Error occur

Module not found: Error: Can't resolve 'util' in 'project-root/nextjs-fullstack-app-template/node_modules/@storybook/router/dist/esm'
Enter fullscreen mode Exit fullscreen mode
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
Enter fullscreen mode Exit fullscreen mode
Collapse
 
piratex profile image
Chhay Toch

Quick fix is too install util as devDependency

yarn add -D util
Enter fullscreen mode Exit fullscreen mode

Thanks leschdom

github.com/storybookjs/storybook/i...

Collapse
 
tabuchid profile image
Doug Tabuchi

Awesome article. If people are voting on topics I’d vote for more exploration of production deployment concerns: integration with error handling products like airbrake and sentry logging, monitoring and tracing.

Collapse
 
alexeagleson profile image
Alex Eagleson

Hey that's a great idea. That's an area actually that I don't have a lot of experience with (I often just make do with the built in logging tools on the hosting platforms) but I would love to dig deeper into that space. Definitely sounds like good blogging material.

Thanks for the suggestion.

Collapse
 
tuantai0304 profile image
tuantai0304

hi Alex, thank you for making this tutorial. This is just awesome

Collapse
 
imamdev_ profile image
Imamuzzaki Abu Salam

Isn't it would be better if we add .editor-config to force LF or CRLF for consistency between cross OS development?

Collapse
 
rmodesto profile image
Rmodesto

Anyone else get a "Cannot find module 'eslint-plugin-storybook' " error when commiting "build: implement storybook" message. Anyone know how to. fix this?

So far, I've configured everything as this tutorial suggest and having trouble finding a solution.

Collapse
 
viktorvillalobos profile image
Víctor Villalobos

Excelent article!

Collapse
 
lextoc profile image
Alexander Claes

Thank you, a lot of userful stuff in here. I'll be applying this in the future!

Collapse
 
tawaliou profile image
Tawaliou

Great.
They release the support of Node.js 16

Collapse
 
nbenzekri profile image
BEN ZEKRI Nouriddin

That was amazing, thank you so much.
Later if you could how we can add css libraries like tailwind css to the project.

Collapse
 
wcrosby profile image
wayne-orgorg

This is an exceptional post and video! You have saved me hours and hours, and I wish more projects followed your guidance. It's spot on. Thank you!

Collapse
 
ntsoa2112 profile image
MIHAINGOHERILANTO

Best article, thank you @alex

Collapse
 
joanroucoux profile image
Joan Roucoux

Awesome article! Very useful tutorial to start with Next.js :)