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.
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 buildstsBuildInfoFile: Stores cache in.next/cache/so Vercel preserves itskipLibCheck: Skips type-checkingnode_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=tgzfor 40k+ files)
Combined, these optimizations typically cut build times by 40-60%. The compound effect of small improvements adds up fast.
Advertisement
Explore these curated resources to deepen your understanding
Official Documentation
Tools & Utilities
Related Insights
Explore related edge cases and patterns
Advertisement