Next.js dynamic imports and code splitting strategies

Next.js bundle is too large, causing slow initial page load. Heavy libraries and components are included in the main bundle even when not immediately needed.

Use next/dynamic for component-level code splitting: const Heavy = dynamic(() => import('./Heavy'), { ssr: false, loading: () => <Skeleton /> }). For libraries: import inside useEffect or event handlers. Use @next/bundle-analyzer to identify large modules. Route-based splitting is automatic in App Router. For third-party scripts, use next/script with strategy='lazyOnload'.

Next.js bundles all imported modules into page chunks. Static imports at the top are included regardless of first-render usage. Dynamic imports create separate chunks loaded on demand.