I recently migrated my project from Next.js 13 (pages directory) to Next.js 15 (app directory). After the migration, I noticed that the build size has increased significantly.
A few questions:
Is it common to see a build size increase when switching from pages to app routing?
Are there specific optimization steps I might be missing in the app directory setup?
In production, is it safe to delete the .next/cache/webpack folder?
I understand it’s used for caching during local development, but does it serve any purpose after the build has been generated and deployed?
Any insights, tips, or best practices for optimizing build size in the app router would be greatly appreciated!
Great questions about your Next.js migration! Let me address each of your concerns:
Build Size Increase: Pages → App Router
Yes, it’s common to see some build size increase when migrating from Pages Router to App Router, but this can often be optimized. Here’s why this happens:
Reasons for size increase:
App Router includes additional runtime code for Server Components
React Server Components require both client and server bundles
New routing system has different code splitting patterns
Default caching behavior changes in Next.js 15
Optimization Steps for App Router
Here are key strategies to optimize your build size:
1. Leverage Server Components
// Prefer Server Components (default in app directory)
// These don't add to client bundle
export default async function Page() {
const data = await fetch('...')
return <div>{/* Server-rendered content */}</div>
}
2. Strategic Client Component Usage
// Only mark components as 'use client' when necessary
'use client'
export default function InteractiveButton() {
// Client-side interactivity only
}
Enable bundle analyzer to identify large dependencies
Configure optimizePackageImports for commonly used libraries
Remove unused dependencies from package.json
Use Server Components for data fetching when possible
Implement proper code splitting with loading.js files
The build size increase is often temporary and can be significantly reduced with proper optimization. The App Router’s benefits (better performance, streaming, Server Components) typically outweigh the initial bundle size concerns once properly optimized.