How do you manually split a large component using dynamic imports in Next.js?

The next/dynamic function lets you import a component only when it is actually needed, such as when a modal opens, keeping that component's code out of the main bundle until the moment it is required, which reduces the initial page weight.

import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('../components/HeavyChart'), {
  loading: () => <p>Loading chart...</p>
});