1. 동적 임포트 (Dynamic Import): Next.js는 동적 임포트를 통해 코드 스플리팅을 지원합니다. 동적 임포트는 페이지나 컴포넌트가 렌더링되는 시점에 필요한 모듈을 동적으로 로드하는 방식입니다. 이를 통해 필요한 모듈만 로드하여 초기 번들 크기를 최소화할 수 있습니다.

import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('./MyComponent'));

function MyPage() {
  return <MyComponent />;
}

위의 예제에서는 dynamic 함수를 사용하여 MyComponent를 동적으로 임포트하고 있습니다. 이렇게 하면 MyComponent가 실제로 렌더링되는 시점에 모듈이 로드됩니다. 필요한 모듈이 많을 경우, 각 모듈을 독립적으로 분리할 수도 있습니다.

1. 코드 분할 (Code Splitting) API: Next.js는 페이지별로 코드를 분할할 수 있는 API를 제공합니다. 이를 사용하면 특정 페이지의 코드를 독립적으로 분할하여 번들링할 수 있습니다. 예를 들어, getStaticProps 또는 getServerSideProps와 함께 사용하여 필요한 데이터를 가져오는 동안 코드를 분할할 수 있습니다.

import SomeComponent from './components/SomeComponent';

export async function getStaticProps() {
  const dynamicModule = await import('./modules/DynamicModule');
  const data = await fetchData();

  return {
    props: {
      dynamicModule,
      data,
    },
  };
}

function MyPage({ dynamicModule, data }) {
  return (
    <>
      <SomeComponent data={data} />
      <dynamicModule.Component />
    </>
  );
}

export default MyPage;

위의 예제에서는 getStaticProps를 사용하여 비동기로 데이터와 동적 모듈을 로드하고 페이지의 props으로 전달합니다. 그런 다음, 컴포넌트에서 이러한 props을 사용하여 필요한 모듈을 렌더링합니다.

이외에도 Next.js는 다양한 코드 스플리팅 기능을 제공하고 있으며, 웹팩과 같은 빌드 도구와도 함께 사용할 수 있습니다. 자세한 내용은 Next.js 공식 문서를 참조하시기 바랍니다. Next.js Code Splitting