Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

next.js build times are slow. How can I make them faster?

I've investigated both the Next JS documentation as well as similar questions like Slow page build time in development with Next.js and TypeScript (which is TypeScript specific - this question concerns JavaScript and does not involve compiling TypeScript)

I am using next.js 10.0.9 and after running next, my app takes around 50 seconds to build and begin responding to HTTP requests.

After making a change, it takes another 12 seconds to rebuild. This seems much slower compared to other popular JS frameworks.

More detail:

  • npm run dev simply runs next and next takes around 50 seconds to become responsive (just after the compiled successfully is printed.

This means tasks like git bisect to find where a bug was introduced are very slow, as next has to do a full 1 minute rebuild after checking out each commit.

$ npm run dev

> [email protected] dev /home/mike/Code/myapp/alpha/frontend
> next

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/mike/Code/myapp/alpha/frontend/.env.local
info  - Loaded env from /home/mike/Code/myapp/alpha/frontend/.env.development
info  - Loaded env from /home/mike/Code/myapp/alpha/frontend/.env
warn  - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://err.sh/next.js/react-version
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

info  - Using external babel configuration from /home/mike/Code/myapp/alpha/frontend/babel.config.json
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
  • Making small changes to files requires around 12 seconds of compiling... watching the triangle before the page becomes responsive at compiled successfully.

How can I speed up next.js build times?

Updates

Running @next/bundle-analyzer helped - thanks @juliomalves - I can see we're loading all of react-heroicons (that's the big index.js in the picture) which ~I can easily fix with more specific imports.~ Update - this is now done though out the codebase 👍

Old:

> import * as Icon from "@graywolfai/react-heroicons";

New:

import { BellOutline } from "@graywolfai/react-heroicons";

This has speed up my build times (after running next, the compiling task finishes faster). However my bundles still seem to be the same size.

like image 967
mikemaccana Avatar asked Mar 22 '21 11:03

mikemaccana


People also ask

How do I speed up my Nextjs?

Use server-side rendering Using server-side rendering will help your app reduce the time required to render the first page on the client side, so the user will see the content of your page much faster. SSR will also improve application performance, especially on mobile devices. Next.

Why is next so slow?

A. Development instead production mode: Next. js has two modes. The development mode ( next dev ) is pretty slow, since a lot of development tools are executed and shipped. To run your app in production mode first build it with next build and then start it with next start .

How long does a Nextjs build take?

It takes around 3-5mins to build or sometimes never finish while locally on my Windows it is built in 20 sec. This textbox defaults to using Markdown to format your answer. You can type !

Is next JS better than react?

In a nutshell, Next. js offers various tools and features to minimize the development process, whereas, React. js has better resources for the front-end development of your mobile and web application.


2 Answers

This question is a few months old, but I'd recommend upgrading Next.js.

The most recent versions of Next.js (11, and 12) have large performance improvements to start-up time, hot reloading, and compilation. And they tend to be very backward-compatible.

Version 11 blog post: https://nextjs.org/blog/next-11

Version 12 blog post: https://nextjs.org/blog/next-12

like image 82
Mike Cavaliere Avatar answered Nov 15 '22 05:11

Mike Cavaliere


I've faced the same issue with next.js version 12.1.5.

My problem was that I was forgetting the server npm run dev was still running - after closing npm run dev and running the build again the build completed in almost 3 minutes.

like image 21
Ahmed Ayman Avatar answered Nov 15 '22 06:11

Ahmed Ayman