Next.js Compiler Cheat Sheet

Next.js Compiler Cheat Sheet (Dev-Friendly)

Key Concepts

• SWC = Rust-based compiler (used by default in Next.js)
• Turbopack = Next-gen bundler (still beta)
• Why Rust? Blazing fast ⚡, low memory, native performance.

Basic Config (next.config.js)

const nextConfig = {
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
    reactRemoveProperties: true,
    emotion: true, // for styled-components/emotion
  },
  experimental: {
    swcMinify: true,
    optimizeCss: true,
    esmExternals: true, // better tree shaking
    optimizePackageImports: ['lodash', 'react-icons'],
    turbo: { /* Turbopack config here */ }
  }
};

module.exports = nextConfig;

SWC vs Babel

Feature	SWC (Default) ✅	Babel ❌
Speed	10–20x faster	Slower
Language	Rust	JavaScript
Threads	Multi-threaded	Single
Usage	Auto in Next.js	Fallback only

Code Splitting & Dynamic Imports

import dynamic from 'next/dynamic';

const LazyComp = dynamic(() => import('./HeavyComp'), {
  loading: () => <p>Loading...</p>,
  ssr: false
});

Tree Shaking

✅ Prefer named imports from ESM packages:

import { debounce } from 'lodash-es';

❌ Avoid:

import _ from 'lodash';

Bundle Analyzer

npm install @next/bundle-analyzer

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' });
module.exports = withBundleAnalyzer(nextConfig);

package.json

"scripts": {
  "analyze": "ANALYZE=true next build"
}

Performance Tips

• Use swcMinify: true ✅
• Turn on optimizePackageImports for big libraries
• Clean up console.log in production
• Use dynamic imports for large components
• Leverage modern JS: "target": "es2020" in .swcrc

TypeScript Setup (`tsconfig.json`)

{
  "compilerOptions": {
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

CSS & Styling

Modules

import styles from './style.module.css';

Styled Components

const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'white'};
`;

Turbopack (Optional)

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

Debugging Tips

// Show build progress
webpack: (config, { webpack }) => {
  config.plugins.push(new webpack.ProgressPlugin());
  return config;
}

// .env.local
NEXT_TELEMETRY_DEBUG=1