Migrating from Next 13 (pages) to Next 15 (app)

Help
1

Hi everyone,

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:

  1. 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?
  1. 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!

Thanks in advance!

4

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
}

3. Dynamic Imports

import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>
})

4. Bundle Analysis

# Analyze your bundle
npm install @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // your config
})

5. Optimize Package Imports

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ['lodash', 'date-fns', 'lucide-react']
  }
}

.next/cache/webpack Folder

For production deployments:

  • :white_check_mark: Safe to delete - This folder is only used during development and build time
  • It contains webpack’s persistent cache to speed up subsequent builds
  • Once deployed, it serves no purpose and can be safely removed
  • Most deployment platforms (Vercel, Netlify) automatically exclude cache folders

For local development:

  • Keep it for faster rebuilds
  • Can be deleted if you need to clear cache issues

Additional App Router Optimizations

1. Take Advantage of New Caching Defaults

In Next.js 15, caching defaults have changed :

// fetch requests are no longer cached by default
// Opt into caching when beneficial
const data = await fetch('...', { cache: 'force-cache' })

2. Use Streaming and Suspense

import { Suspense } from 'react'

export default function Page() {
  return (
    <Suspense fallback={<Loading />}>
      <SlowComponent />
    </Suspense>
  )
}

3. Optimize Metadata

// Use generateMetadata for dynamic metadata
export async function generateMetadata({ params }) {
  return {
    title: `Page ${params.id}`,
  }
}

4. Consider Partial Prerendering (PPR)

If you’re using Next.js 15, consider enabling PPR for better performance:

// next.config.js
module.exports = {
  experimental: {
    ppr: true
  }
}

Quick Wins Checklist

  • Audit client components - minimize ‘use client’ usage
  • Use dynamic imports for heavy components
  • 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.