Brief introduction

Next.js is one of the most hyped and used React Frameworks to create SSR(Server Side Rendering) applications nowadays.

This framework was created inside of ZEIT headquarters, the same company behind the NOW, a really easy and fast way to deploy your apps.

🚀 Boosting your build time

In a React project, many folders patterns to organize your code are possible, so you also can have your specs in different folders, but Next.js has one requirement that your pages should be placed in the pages folder. The standard setting will serve every js file located in this place as a route. You can find more 🔗here about how to change this if you need more custom routes to your project. But it still building the JS files.

All Javascript files placed in that folder and those subfolders are going to build, so your spec files also will be built. In the moment what I'm writing Next.js 7 and 8 both has this behavior.

Next, if that was not enough and you decide to generate source maps for your files, things become way more critical. Probably you are going to have source maps for your specs file too. Imagine how much time you've been spending unnecessarily.

What about the numbers?

Disclaimer: this might change accordingly with your machine, project size and structure.

My project has the following numbers:

• Around 100 React components
• Around 15 Next.js pages, which usually are a group of React components
• Using latest Next.js 7

My machine is a MacBook Pro 13" - 2018 and to build the project it was taking between 150~165 seconds without source maps.

Moving the spec's files from pages to another folder the build time decreases to 45~60 seconds. An increase of 266% in the build time because of this simple miss placement of the files.

Wrapping up

When you are using a third party framework or library, with a built-in setup to process something you definitely should read the docs.

You can miss important requirements or how things works that may cause trouble for you in the future, and also digging deep into their codebase you may find interesting things that can help you too. Don't be afraid to do that.

If this post helped you solve that particular problem or similar issues, I would like to know.

This is my first post in Dev.to. Feedback and discussion are more than welcome, please drop me a comment if I helped you tweet to me at @abnersajr.

Last but not least, in software development, small things can cause a big problem.