Improve nextjs compilation time in local development

Of course. A slow Next.js compilation on a Mac is a frustratingly common issue. The causes can range from simple configuration oversights to deeper system-level problems.

Let's break down the solutions, starting with the quickest and most impactful wins and moving to more advanced diagnostics.

🚀 Level 1: The Quick Wins (Try These First)

These are the most common culprits and often provide the biggest performance boost for the least effort.

1. Switch to Turbopack

This is the single most effective thing you can do for your development experience. Turbopack is the new Rust-based bundler for Next.js, and it's incredibly faster for incremental updates (Hot Module Reloading).

How to use it:
Instead of npm run dev, use this command:

npm run dev -- --turbo

or edit your package.json script:

// package.json
"scripts": {
  "dev": "next dev --turbo",
  // ...
}

Note: As of Next.js 13, Turbopack is still in beta, but it's very stable for development.

2. Update Node.js

Newer Node.js versions (especially the latest LTS) contain significant performance improvements for the JavaScript engine and module system.

How to update:
The best way to manage Node versions is with nvm (Node Version Manager).

# Install the latest LTS version of Node.js
nvm install --lts

# Use it
nvm use --lts

Restart your terminal and IDE after switching versions.

3. Use a Faster Package Manager (`pnpm`)

pnpm is highly efficient with node_modules, using symlinks to avoid duplicating files. This leads to much faster installation and can improve resolution times during development.

How to switch:

# Install pnpm
npm install -g pnpm

# Delete your old node_modules and lock file
rm -rf node_modules package-lock.json

# Install with pnpm
pnpm install

# Update your dev script in package.json
"scripts": {
  "dev": "pnpm dev",
  // ...
}

⚙️ Level 2: Next.js Specific Optimizations

These involve tuning your next.config.js file and being mindful of how you use Next.js features.

1. Minimize `transpilePackages`

If you have transpilePackages in your next.config.js, you are forcing Next.js to parse and compile packages from node_modules. This is a major performance killer. Only include packages that absolutely need it (e.g., UI libraries that use CSS-in-JS and are not ESM).

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  // BAD: Transpiling everything is slow!
  // transpilePackages: ['@mui/material', 'lodash', ...]

  // GOOD: Only transpile what is necessary.
  // Try removing packages one by one to see if you still need them.
  transpilePackages: ['some-specific-esm-module'],
};

module.exports = nextConfig;

2. Use Webpack Bundle Analyzer

You can't optimize what you can't measure. Use the built-in analyzer to see what's making your builds large and slow.

How to use it:
Add this to your next.config.js:

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  // your config here
};

module.exports = withBundleAnalyzer(nextConfig);

Install the analyzer: npm install @next/bundle-analyzer --save-dev

Then run your build with the analyze flag:

ANALYZE=true npm run build

This will open a visual map of your bundles, helping you identify massive dependencies.

3. Ensure SWC Minification

Next.js uses SWC (a Rust-based compiler) by default for minification, which is extremely fast. Ensure you haven't accidentally switched to a slower alternative like Terser. If you don't have a webpack config section, you're already using the fast default.

// next.config.js - This is the standard, fast setup.
const nextConfig = {
  swcMinify: true, // This is the default, but good to be explicit
};

🖥️ Level 3: macOS & System-Level Fixes

These issues are specific to your Mac's environment and can have a huge impact on file-watching performance during development.

1. Disable Antivirus / Security Software (For Testing)

Corporate security software (like CrowdStrike, Jamf) or even aggressive third-party antivirus can intercept every file save, crippling Hot Module Reloading (HMR).

Action:
Temporarily disable your security software and see if next dev becomes fast. If it does, you need to add an exclusion for your project folder, node_modules, and .next directories in your security software's settings.

2. Exclude Project Folders from Spotlight Indexing

macOS Spotlight constantly indexing files can cause I/O contention and slow down your dev server as it writes to .next.

Action:
Open your Terminal and run these commands to exclude your project folders from indexing.

# Replace /path/to/your/project with the actual path
# e.g., /Users/yourname/dev/my-next-app

sudo mdutil -i off /path/to/your/project
sudo mdutil -i off /path/to/your/project/node_modules
sudo mdutil -i off /path/to/your/project/.next

To re-enable indexing later, change off to on.

3. Tame Your IDE

Heavy IDEs and extensions can be a bottleneck.

VS Code: Disable non-essential extensions. Grammarly, copilot, and heavy linters can be demanding.

Excluding Folders: In your VS Code settings.json, add the following to prevent the IDE from scanning node_modules and .next, which frees up CPU cycles.

// VS Code settings.json
"files.exclude": {
  "**/.git": true,
  "**/.svn": true,
  "**/.hg": true,
  "**/CVS": true,
  "**/.DS_Store": true,
  "**/Thumbs.db": true,
  "**/node_modules": true, // <-- Add this
  "**/.next": true // <-- And this
},
"search.exclude": {
  "**/node_modules": true, // <-- And add here for search
  "**/.next": true
}

🧠 Level 4: A Structured Workflow to Pinpoint the Issue

If the above doesn't solve it, let's be methodical.

Create a Baseline: In a completely separate folder, create a brand new Next.js app.
```
npx create-next-app@latest test-app
cd test-app
npm run dev # Or npm run dev -- --turbo
```
Is this fast? If yes, the problem is in your specific project code or dependencies. If no, the problem is your machine's environment.
Profile Your Own Project's Dev Server:
Run your project's dev server with the debug flag. It will show you exactly where it's spending time.
```
NODE_OPTIONS='--inspect' next dev
```
Then open Chrome's chrome://inspect and connect to the Node process to see profiles and logs.
Check Your Hardware:
- RAM: Are you running with only 8GB of RAM? With a browser, IDE, and Next.js server, you'll be constantly swapping memory to the SSD, which is very slow. 16GB is a comfortable minimum; 32GB is ideal.
- SSD: You must be on a Solid State Drive (SSD). A traditional Hard Disk Drive (HDD) will be extremely slow for modern web development.
- CPU: Newer Apple Silicon (M1/M2/M3) Macs are exceptionally fast at compilation due to their unified memory architecture and high core counts.

Summary Checklist

To get started immediately, go through this checklist:

✅ Run next dev -- --turbo. This is your best first step.
✅ Update to the latest Node.js LTS using nvm.
✅ Switch to pnpm as your package manager.
✅ Audit transpilePackages in next.config.js. Remove everything you don't need.
✅ Temporarily disable security software to see if it's the cause.
✅ Run ANALYZE=true npm run build to find oversized dependencies.

Vijay T - Technical Blog