Code splittingpatterns

Route-based splitting

Next.js App Router automatically splits each page.tsx into its own chunk. No config required — every route ships only the code it needs.

app/
├── dashboard/
│   └── page.tsx      → dashboard.<hash>.js
├── settings/
│   └── page.tsx      → settings.<hash>.js
└── layout.tsx        → shared shell

Dynamic imports

Use next/dynamic to defer heavy components until they are needed. Perfect for charts, editors, and modals.

import dynamic from 'next/dynamic'

const HeavyChart = dynamic(
  () => import('@/components/chart'),
  { loading: () => <Skeleton /> }
)

When to split

• Above the fold — keep in the main bundle. First paint matters.
• Below the fold — dynamic import. Charts, analytics, comment sections.
• Auth-gated — split entire dashboard behind a login boundary.