Next.js performance: Turbopack, code splitting, and build optimization

Why build performance matters for SaaS

Fast build times and optimized bundles are essential for developer productivity and user experience:

• Faster development iteration with quick compilation
• Improved hot module replacement for instant feedback
• Smaller production bundles for faster page loads
• Better code splitting for optimal resource loading
• Reduced CI/CD build times for faster deployments

What you get with Fastack

Fastack includes optimized Next.js configuration with Turbopack support and build optimizations:

Turbopack for faster development

Fastack includes Turbopack support for significantly faster development builds:

• 10x faster compilation - Rust-based bundler outperforms Webpack
• Better caching - Improved incremental compilation
• Faster HMR - Hot module replacement in milliseconds
• On-demand compilation - Routes compiled when first accessed

{
  "scripts": {
    "dev": "next dev",
    "dev:turbo": "next dev --turbo",
    "build": "next build",
    "start": "next start"
  }
}

Turbopack can be enabled with the --turbo flag, providing up to 10x faster compilation compared to Webpack. The Rust-based bundler uses incremental compilation and better caching strategies to minimize rebuild times.

Webpack optimization for development

Fastack includes optimized webpack configuration for faster development builds:

• Filesystem caching - Aggressive caching in development mode
• Node.js module exclusion - Prevents server-only modules in client bundles
• Package aliasing - Ensures single instance of shared dependencies
• External dependencies - Marks server-only packages as external

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Enable standalone output for Docker deployments
  output: 'standalone',
  transpilePackages: [
    '@saas/ui-core',
    '@saas/auth',
    '@saas/query',
    '@saas/i18n',
    '@saas/utils',
    '@saas/cookies',
    '@saas/pwa',
    '@saas/monitoring',
    '@saas/notifications',
    '@saas/captcha',
    '@saas/form',
    '@saas/email',
    '@saas/auth',
    '@saas/query',
    '@saas/i18n',
    '@saas/utils'
  ],
  experimental: {
    serverActions: {
      bodySizeLimit: '2mb',
    },
  },
  // Optimize compilation in development
  webpack: (config, { dev, isServer }) => {
    if (dev && !isServer) {
      // Cache more aggressively in development
      config.cache = {
        type: 'filesystem',
        buildDependencies: {
          config: [__filename],
        },
      };
    }

    // Exclude Node.js-only modules from client bundles
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        net: false,
        tls: false,
        crypto: false,
        stream: false,
        url: false,
        zlib: false,
        http: false,
        https: false,
        assert: false,
        os: false,
        path: false,
      };

      // Mark web-push and related packages as external for client bundles
      config.externals = config.externals || [];
      config.externals.push({
        'web-push': 'commonjs web-push',
        'agent-base': 'commonjs agent-base',
        'https-proxy-agent': 'commonjs https-proxy-agent',
      });
    }

    // Ensure motion is properly resolved
    config.resolve.alias = {
      ...config.resolve.alias,
      'motion/react': require.resolve('motion/react'),
    };

    return config;
  },
};

The webpack configuration optimizes development builds by enabling filesystem caching, excluding Node.js-only modules from client bundles, and ensuring proper package resolution. The transpilePackages option ensures that monorepo packages are properly transpiled, while the resolve.fallback prevents server-only modules from being included in client bundles.

Package transpilation for monorepo

Fastack configures package transpilation for monorepo compatibility:

• Monorepo support - Transpiles all @saas/* packages
• TypeScript support - Ensures TypeScript packages are properly compiled
• Shared dependencies - Prevents duplicate package instances
• Build optimization - Only transpiles what's needed

transpilePackages: [
    '@saas/ui-core',
    '@saas/auth',
    '@saas/query',
    '@saas/i18n',
    '@saas/utils',
    '@saas/cookies',
    '@saas/pwa',
    '@saas/monitoring',
    '@saas/notifications',
    '@saas/captcha',
    '@saas/form',
    '@saas/email',
    '@saas/auth',
    '@saas/query',
    '@saas/i18n',
    '@saas/utils',
]

The transpilePackages option tells Next.js to transpile these packages during the build process. This is essential for monorepo setups where packages are written in TypeScript and need to be compiled before being used in the Next.js application.

Standalone output for production

Fastack uses Next.js standalone output for optimized production deployments:

• Smaller Docker images - Only includes necessary files
• Faster deployments - Reduced image size speeds up container builds
• Self-contained - Includes all dependencies in output
• Production-ready - Optimized for serverless and container deployments

const nextConfig = {
  // Enable standalone output for Docker deployments
  output: 'standalone',
  // ... other config
};

The output: 'standalone' option creates a minimal production build that includes only the necessary files. This is ideal for Docker deployments where image size matters, and it significantly reduces deployment times.

Performance comparison

Fastack's optimized configuration provides significant performance improvements:

Turbopack provides up to 10x faster compilation compared to standard Webpack, with route access times reduced significantly. Hot module replacement is also significantly faster, providing near-instant feedback during development.

Code splitting and bundle optimization

Fastack leverages Next.js automatic code splitting and optimizes bundle sizes:

• Automatic code splitting - Next.js splits code by route automatically
• Dynamic imports - Large dependencies loaded on-demand
• Tree shaking - Unused code automatically removed
• Bundle analysis - Built-in bundle size analysis tools

// Dynamic import for code splitting
import dynamic from 'next/dynamic';

// Component loaded only when needed
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <div>Loading...</div>,
  ssr: false, // Disable SSR if component is client-only
});

export default function Page() {
  return (
    <div>
      <HeavyComponent />
    </div>
  );
}

Next.js automatically splits code by route, but you can use dynamic imports for additional code splitting. This is especially useful for heavy components or libraries that aren't needed on every page.

Time saved: 15+ hours

Optimizing Next.js build performance from scratch typically requires:

• Configuring Turbopack integration (1-2 hours)
• Setting up webpack optimization (2-3 hours)
• Configuring package transpilation (1-2 hours)
• Optimizing bundle sizes (2-3 hours)
• Setting up standalone output (1-2 hours)
• Testing build performance (2-3 hours)
• Configuring code splitting strategies (2-3 hours)
• Documenting build optimizations (1-2 hours)

Total: 12-20 hours of development time that you save with Fastack.

Best practices included

Fastack follows Next.js performance best practices:

• Turbopack support - Fastest development builds available
• Webpack optimization - Aggressive caching and module exclusion
• Package transpilation - Proper monorepo package handling
• Standalone output - Optimized production builds
• Code splitting - Automatic and manual code splitting strategies

Conclusion

Optimized build performance is essential for productive development and fast deployments. Fastack provides a complete, optimized Next.js configuration that saves you hours of development time while ensuring fast builds, efficient bundles, and excellent developer experience.

With Fastack, you get:

• Turbopack support for 10x faster development builds
• Optimized webpack configuration with filesystem caching
• Monorepo package transpilation for seamless integration
• Standalone output for optimized production deployments
• Automatic code splitting and bundle optimization
• Server-only module exclusion for smaller client bundles
• Build performance optimizations built-in from day one