The structure of the files in your NextJS application is really important. I mean it literally. In other web frameworks like React it doesn’t really matter how you’re arranging your files as long as it makes sense to you, the developer.

On the other hand in NextJS, you need to be really careful about this aspect of your architecture as there are a couple of caveats that can drastically worsen the performance of your application.

Pages

In NextJS components stored under the pages directory are referred to as pages. Those will be later accessible via the relevant URL when using the application.

Because of the pre-rendering feature, NextJS generates the HTML for each page in advance, thus storing unnecessary components under that directory can have a really bad effect on the overall speed of your application.

Components

If you have some reusable components that won’t be acting as pages for your application then you can create a new directory in the root of your application called components and store all of your files there. You can then freely import them across your application as needed. Keeping them there won’t affect the performance of your application in any way.

Please take a look at the screenshot below to understand it better.

👋 Hey, I'm Dawid Budaszewski
Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. Now it's time to pass the knowledge onto somebody else!

💬 Leave a comment

Your email address will not be published.

We will never share your email with anyone else.