Next.js Compiler

SWC Compiler

• Next.js uses SWC by default for faster compilation.
• 17x faster than Babel for transpilation.
• Supports all modern JavaScript features.

  # No configuration needed - works out of the box
  npm run build

• Built-in support for TypeScript and JSX.
• SWC handles dead code elimination automatically during production builds.

  npm run build
  # Unused imports and exports are removed automatically

• Check which compiler Next.js is using at build time.

  next info
  # Shows SWC or Babel depending on your config

Compiler Configuration

• Configure compiler options in next.config.js.

  // next.config.js
  module.exports = {
    swcMinify: true, // Enable SWC minification
    compiler: {
      reactRemoveProperties: true, // Remove React debugging props
      removeConsole: {
        exclude: ['error', 'warn'] // Keep error and warn logs
      }
    }
  };

• Remove styled-jsx code from production.

  compiler: {
    styledComponents: true
  }

• Strip all console.log calls from the production build.

  module.exports = {
    compiler: {
      removeConsole: true // removes all console.* calls
    }
  };

• Remove React test data attributes for leaner production HTML.

  module.exports = {
    compiler: {
      reactRemoveProperties: { properties: ["^data-testid$"] }
    }
  };

• Enable emotion CSS-in-JS support through the compiler.

  module.exports = {
    compiler: {
      emotion: true
    }
  };

Build Optimization

• Enable module concatenation for smaller bundles.

  // next.config.js
  module.exports = {
    experimental: {
      optimizePackageImports: ['@mui/material']
    }
  };

• Configure output for different environments.

  npm run build     # Production build
  npm run dev       # Development build

• Use output: 'standalone' to create a self-contained deployment folder.

  module.exports = {
    output: "standalone"
    // Creates .next/standalone for minimal Docker images
  };

• Enable turbopack for even faster local development.

  next dev --turbo
  # Experimental: faster HMR and cold start in dev

• Tree-shake large icon libraries with optimizePackageImports.

  module.exports = {
    experimental: {
      optimizePackageImports: ["lucide-react", "@heroicons/react"]
    }
  };

Next.js-Specific Features

• Automatic image optimization during build.
• CSS-in-JS extraction and optimization.
• Automatic font optimization with next/font.

  import { Inter } from 'next/font/google';
  const inter = Inter();

• Server Actions are compiled with special serialization automatically.

  "use server";
  export async function save(data: FormData) {
    // Compiled to a secure server endpoint automatically
  }

• TypeScript paths are resolved at compile time with no extra config.

  {
    "compilerOptions": {
      "paths": { "@/*": ["./src/*"] }
    }
  }

Performance Monitoring

• Check build times and bundle size.

  npm run build
  # Displays build summary and timing

• Use Bundle Analyzer for detailed insights.

  ANALYZE=true npm run build

• Add @next/bundle-analyzer to inspect bundle composition.

  npm install -D @next/bundle-analyzer

• Wrap next.config.js with bundle analyzer plugin.

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

• Review the build output table to spot large first-load JS.

  npm run build
  # Route                 Size    First Load JS
  # /                    5.2 kB        89.3 kB

Tip: Next.js optimizations are automatic — you don't need to do anything special. Just write good code and the compiler handles the rest.

Warning: Avoid manually configuring Babel unless absolutely necessary — SWC is faster and handles most cases.