EdgeCases Logo
Mar 2026
Next.js
Deep
7 min read

Next.js Build Cache: TypeScript Incremental and Package Imports

Incremental TypeScript, optimizePackageImports, and smart caching—three config changes that compound into 40-60% faster Next.js builds.

nextjs
vercel
typescript
build-cache
turbopack
performance
optimization

TypeScript recompiles every file on each build. Large imports pull entire libraries into your bundle analysis phase. Fix both with incremental builds and optimizePackageImports—two config changes that compound into significant build speedups.

TypeScript Incremental Builds

By default, TypeScript type-checks every file from scratch on each build. For large codebases, this wastes minutes re-verifying unchanged code.

// tsconfig.json
{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": ".next/cache/tsconfig.tsbuildinfo",
    "skipLibCheck": true
  }
}

What each option does:

  • incremental: Caches compilation state between builds
  • tsBuildInfoFile: Stores cache in .next/cache/ so Vercel preserves it
  • skipLibCheck: Skips type-checking node_modules—your dependencies' types are already published

First build: same speed. Subsequent builds: only changed files recompile. On a 200-file project, this cut type-checking from 45s to 8s.

Package Import Optimization

Barrel exports (import { Button } from '@radix-ui/react') force the bundler to analyze entire packages to tree-shake correctly. For large libraries, this adds seconds to every build.

// next.config.ts
const nextConfig: NextConfig = {
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      '@radix-ui/react-icons',
      '@radix-ui/react-dialog',
      '@radix-ui/react-dropdown-menu',
      '@radix-ui/react-select',
      '@tiptap/react',
      'date-fns',
      'recharts',
      'framer-motion',
      'lodash'
    ]
  }
};

This tells Next.js to transform barrel imports into direct imports at compile time:

// Before optimization (analyzed at build)
import { format, parseISO } from 'date-fns';

// After optimization (direct import, faster build)
import format from 'date-fns/format';
import parseISO from 'date-fns/parseISO';

Vercel Cache Configuration

Vercel caches .next/cache/ between builds automatically. But certain patterns break cache effectiveness:

// ❌ Cache-busting patterns
const buildId = Date.now(); // Different every build
const version = process.env.VERCEL_GIT_COMMIT_SHA; // Changes on every commit

// ✅ Stable patterns
const version = process.env.npm_package_version; // Only changes on releases

Also ensure your .gitignore doesn't exclude cache directories that Vercel needs to preserve.

Turbopack for Development

Turbopack (Rust-based bundler) dramatically speeds up dev server starts. While still maturing for production builds, it's stable for development:

// package.json
{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build" // Still uses webpack for prod
  }
}

Dev server startup goes from 5-10s to under 1s on large projects. Hot module replacement becomes nearly instant.

Parallel Route Loading

If your build fetches data for static pages, parallelize the requests:

// ❌ Sequential (slow)
export async function getStaticProps() {
  const posts = await getPosts();
  const categories = await getCategories();
  const authors = await getAuthors();
  return { props: { posts, categories, authors } };
}

// ✅ Parallel (fast)
export async function getStaticProps() {
  const [posts, categories, authors] = await Promise.all([
    getPosts(),
    getCategories(),
    getAuthors()
  ]);
  return { props: { posts, categories, authors } };
}

For 50 pages each making 3 sequential requests (100ms each), that's 15 seconds saved just from parallelization.

Bun for Package Installation

npm install can take 30-60 seconds. Bun does it in 3-5 seconds:

// vercel.json
{
  "installCommand": "bun install"
}

Caveat: some packages need --legacy-peer-deps with npm. If you hit compatibility issues, keep npm for CI but use Bun locally for fast iteration.

Measuring Impact

Track your build phases in Vercel's deployment logs:

  • Installing dependencies: Bun vs npm comparison
  • Building: TypeScript incremental impact
  • Generating static pages: ISR vs full SSG
  • Uploading: File count affects this (use --archive=tgz for 40k+ files)

Combined, these optimizations typically cut build times by 40-60%. The compound effect of small improvements adds up fast.

Advertisement

Related Insights

Explore related edge cases and patterns

Next.js
Surface
ISR Build Time Reduction: From Minutes to Seconds
6 min
Next.js
Expert
Vercel Image Build Bottleneck: CDN Migration and OG Generation
8 min
Next.js
Deep
Turbopack: Next.js 16 Default Bundler (2-10× Faster)
8 min

Advertisement