How To Structure Your NextJs Application

A full guide for NextJs to build scalable, production-ready applications

What Is Next?

As with ReactJs, NextJs (The React Framework for Production) gives you the freedom of how you design your application and where to place your code, it has all the best features that ReactJs lacks, including image and font optimizations, fast rendering, and hybrid static and server rendering. But with great power comes great responsibility

As you navigate through your app, you frequently pause to consider where to put this or that, and occasionally you find yourself wondering should I have put this code somewhere else instead ? For this reason, you need a scalable production-ready folder structure that neither React nor NextJs ship with. so your question is, how should I structure my code? Don't worry , I have a solution.

Remember that there are numerous approaches you can take to this. I'm not saying that this is the best. Since each person is unique, you could like another one over mine,only you can decide what is the best for you and your team.

Staring Fresh

Let's first look at the structure NextJs provides for us:

If you started a new NextJs application, you will see certain folders in your root folder. We won't worry about the other files, such as eslint and nextconfig, because they dont matter to us now.

` > node_modules

pages
api
hello.tsx
_app.tsx
index.tsx
public
styles
.. rest of the files`

Continue Reading Here https://elbarryamine.com/blog/how-to-structure-your-nextjs-application