Nextjs 13 is insanely slow in dev environment

Question

I will be very brief:

I recently switched to Nextjs 13 and I noticed it's insanely slow when I run my app on localhost via npm run dev

Pages even take 10 seconds and sometimes even longer to load, how it is possible?

To all who use Nextjs: do you know if it's a problem of the new version 13? did you encounter the same problem?

Gluteal

Answer 1

I had a similar issue on a big project, and for that particular issue using swc seems to have reduced the compile time for the first time a route is accessed:

const nextConfig = {
// ...
    swcMinify: true,
//...
}

There is an ongoing issue on GitHub about it, people are suggesting what have work for their particular issue.

Orthicon

For those still facing this issue with Next 14 and App Router: github.com/vercel/next.js/issues/48748#issuecomment-1578374105 – Benzvi

Answer 2

You can do the following things to speedup dev environment of Next.js 13+ development server.

Add the following item in next.config.js file.

module.exports = {
    fastRefresh: true,
};

You can add the following if above thing did not work in next.config.js.

module.exports = {
    concurrentFeatures: true,
};

Optimize the build configuration: Ensure that your build configuration is optimized for development. For example, you can disable certain optimizations like minification and source-maps to improve build speed during development. Review your next.config.js file and make appropriate adjustments.

Example is here in next.config.js:

module.exports = {
    productionBrowserSourceMaps: false, // Disable source maps in development
    optimizeFonts: false, // Disable font optimization
    minify: false, // Disable minification
};

Stonybroke

Minify and fastRefresh are now not supported. It will give an error The root value has an unexpected property, rewritess, which is not in the list of allowed properties – Calli

Answer 3

One thing I found that cut our load time by 2/3 was ditching scss. We were using it in our global css for just a couple variables, and loading those variables from an external library.

Turning this into vanilla CSS worked great. Note we're also using tailwindcss.

Mossman

I love tailwindcss but if you're having load time issues in a development environment, it is a likely culprit. Every time you make a change to the page, tailwind needs to treeshake again, which means it's scanning every line of your code against every line of it's css library - which is huge - in order to figure out which ones to print to the browser. Of course this only happens once during the production build process which is why it's so great, but in development it's quite expensive. – Travesty

Yep this is exactly what we found as well. The treeshaking for us was not that brutal when not using variables. However when there were scss vars in the global context I suspect that tailwind had to perform a full update every time, which WAS brutal... – Mossman

Answer 4

Another thing that could cause slow loading in dev mode on windows is antivirus. In my case I'm using Bitdefender - after adding my project directory to the exceptions list the performance skyrocketed.

Phalanstery

Excluded my project folder in Bitdefender and its back to normal. – Violetavioletta