next.js - Satic HTML Export

next export 명령어를 통해 next.js 어플리케이션을 static HTML으로 만들 수 있다. 이렇게 만들어진 Static HTML은 Node.js 서버없이 운영이 가능하다. 다음과 같은 기능이 필요없다면, next export를 사용하는 것이 권장된다.

• Image Optimization (default loader)
• Internationalized Routing
• API Routes
• Rewrites
• Redirects
• Headers
• Middleware
• Incremental Static Regeneration
• fallback: true
• getServerSideProps

위와 같은 기능들은 node.js 서버를 필요로 하고, 빌드 시 계산할 수 없는 로직을 포함하고 있기에, 위와 같은 기능을 사용중이라면 next export를 통한 node.js 서버 없는 운영이 가능하다.

사용법

package.json을 다음과 같이 변경한다.

1
2
3
4
5
6
7

{
  ...
  "scripts":{
    "build": "next build && next export"
  }
  ...
}

이후 npm run build를 수행하면, out 디렉터리가 생성된다.

next build 동안 생성된 HTML 파일을 next export를 통해 out 디렉터리에 모아 export 해주는 것이다.

경우에 따라서는 next.config.js에 exportPathMap를 설정하여 어떤 페이지들을 static하게 생성해낼것인지 지정이 가능하다. 이때 getStaticPaths를 사용한 페이지는 exportPathMap에서 설정하지 않아도 자동으로 HTML을 생성한다.

지원하는 기능

next export를 하더라도 다음과 같은 기능은 지원된다.

• Dynamic Routes when using getStaticPaths
• Prefetching with next/link
• Preloading JavaScript
• Dynamic Imports
• CSS Modules, styled-jsx
• Client-side data fetching
• getStaticProps
• getStaticPaths
• custom loader를 사용한 Image Optimization

getInitialProps

getInitialProps를 getStaticProps 대신에 사용해도 되지만, 몇가지 주의사항이 존재한다.

• getInitialProps는 getStaticProps나 getStaticPaths와 같은 페이지에서 함께 쓰일 수 없다. dynamic route를 사용해야한다면, getStaticPaths를 사용하는 대신에 exportPathMap을 설정하는 것이 좋다.
• getInitalProps가 export 단계에서 호출될 때, context의 req, res는 비어있다.
• getInitialProps는 클라이언트 단에서 네비게이트 될 때 호출된다. 빌드시 호출하고 싶다면 getStaticProps를 사용해야한다.
• getInitialProps는 node.js 라이브러리나 file-system을 사용할 수 없다.

위와 같은 주의사항이 있기에, getInitialProps보다는 getStaticProps를 사용하는 것이 권장된다.

출처

• https://nextjs.org/docs/advanced-features/static-html-export