1. Home
Technology / Next.js

Next.js Compiler

Understand the Next.js SWC compiler, build options, and performance optimizations.

TL;DR

  1. 01Next.js uses SWC, a Rust-based compiler for speed.
  2. 02SWC produces faster builds and smaller bundles than Babel.
  3. 03Configure compiler transformations in next.config.js for production.
Jump to section

Tips

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

Warnings

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

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 — SWC minification is enabled by default in Next.js 15.
    // next.config.js
module.exports = {
  compiler: {
    reactRemoveProperties: true, // Remove React debugging props
    removeConsole: {
      exclude: ['error', 'warn'] // Keep error and warn logs
    }
  }
};
  • Enable styled-components transform natively via SWC — replaces babel-plugin-styled-components.
    module.exports = {
  compiler: { styledComponents: true }
};
  • Strip all console.log calls from the production build, keeping error and warn.
    module.exports = {
  compiler: {
    removeConsole: { exclude: ['error', 'warn'] }
  }
};
  • Remove data-testid attributes to reduce production HTML size.
    module.exports = {
  compiler: {
    reactRemoveProperties: { properties: ["^data-testid$"] }
  }
};
  • Enable emotion CSS-in-JS support through the SWC compiler.
    module.exports = {
  compiler: { emotion: true }
};

Build Optimization

  • Tree-shake large icon and component libraries with optimizePackageImports.
    // next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ["lucide-react", "@heroicons/react", "@mui/material"]
  }
};
  • Use output: 'standalone' for minimal Docker images in production.
    module.exports = {
  output: "standalone" // Creates .next/standalone with no node_modules needed
};
  • Enable Turbopack for faster HMR and cold start in development (Next.js 15).
    next dev --turbopack
# Rust-based bundler: faster incremental builds than webpack
  • Delete .babelrc to re-enable SWC if your project accidentally falls back to Babel.
    # Next.js uses Babel instead of SWC when .babelrc exists
rm .babelrc   # or migrate its config to next.config.js compiler options
  • Add bundle analyzer to inspect chunk composition per route.
    npm install -D @next/bundle-analyzer
ANALYZE=true npm run build  # Opens interactive treemap

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/*"] }
  }
}

Build Output and CI

  • Review the build output table after every npm run build to catch First Load JS regressions.
    npm run build
# Route                 Size    First Load JS
# /                    5.2 kB        89.3 kB  ← aim for < 130 kB
  • Wrap next.config.js with bundle analyzer to generate an interactive treemap.
    const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true"
});
module.exports = withBundleAnalyzer({});
  • Run Lighthouse CI in GitHub Actions to gate performance regressions.
    - name: Lighthouse CI
  run: lhci autorun
  env:
    LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_TOKEN }}
  • Set a minimum Lighthouse performance score to fail CI on regressions.
    {
  "assert": {
    "assertions": {
      "categories:performance": ["error", { "minScore": 0.9 }]
    }
  }
}
  • Use next info in the terminal to confirm whether SWC or Babel is active.
    next info
# Operating System: ..., SWC: true

FAQ