next.js build times are slow. How can I make them faster?
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
mikemaccana
I help verify websites for EV HTTPS at CertSimple and have made a bunch of tech products in the past 20 years as a product manager, CTO, lead developer, systems engineer, and technical architect - see https://mikemaccana.com
Updated on July 26, 2022Comments
-
mikemaccana almost 2 years
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 runsnext
and next takes around 50 seconds to become responsive (just after thecompiled 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 atcompiled 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 ofreact-heroicons
(that's the bigindex.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
, thecompiling
task finishes faster). However my bundles still seem to be the same size. -
-
mikemaccana over 2 yearsThat is about the site using your users hard disk nothing to do with developing apps.