Dynamic import

Next.js에서 컴포넌트를 사용하는 시점에 로드하는 것을 Dynamic import라고 한다. Image 컴포넌트나 Link 컴포넌트도 뷰포트 안에 들어올 때 로드 하는 Lazy Load와 마찬가지로 필요한 타이밍에 로드해서 사용할 수 있는 방법이다.

// 기존에 사용하던 버튼 컴포넌트
// Dynamic import 미적용
const Button = ({ children }) => {
  return (
    <button
      className="bg-black dark:bg-white text-lg text-teal-200  dark:text-teal-700 rounded-lg px-5"
      onClick={() => alert(`thanks to ${children}`)}
    >
      {children}
    </button>
  );
};


// Dynamic import를 적용한 버튼 컴포넌트

import dynamic from 'next/dynamic'


// 컴포넌트로 분리 후, 그 경로를 명시해주어야 한다.

const Button = dynamic(() => import('../../components/Button'), {
  loading : () => <div>Loading...</div>
})

React 18버전 미만에서는 suspense:true 대신 loading:()=>컴포넌트로 로딩중에 컴포넌트를 노출할 수 있다.

const Button = dynamic(() => import('../../components/Button'), {
  loading : () => <div>Loading...</div>
})

Static Export

Static Export는 Next.js 프로젝트에서 정적인 파일들로만 build하는것을 말한다. CDN 등에 올려서 서비스를 제공하지만, Node 서버가 있어야지만 동작하는 기능들은 포기해야한다. (ex. Image Optimization, API Routes 등..)

1. package.json에 명령어 추가

"export" : "next build && next export"

위 명령어를 추가하고 yarn export를 할 시에 빌드는 되지만 export는 제대로 안 될 수 있는데, 위에 예로 든 이미지 컴포넌트나 api routes가 작동하지 않을 수 있기 때문이다.