(Next.js) Build

Mirrer·2022년 10월 9일

next.js

Next.js

목록 보기

7/10

Next Build

Build과정은 서비스를 배포하기전 체크

Build는 서비스를 실제 배포하기 전 개발과정에서 연결된 프로그램들을 미리 준비하는 과정이다.

Next.js를 사용하면서 package.json파일에는 다음과 같은 scripts를 설정했다.

"scripts": {
  "dev": "next -p 3060",
  "build": "next build",
  "start": "next start",
},

각각의 명령어는 다음과 같은 역활을 수행한다.

dev: 'next dev' 개발 모드에서 Next.js를 실행
build: 'next build' 프로덕션 용도로 애플리케이션을 빌드
start: 'next start' Next.js 프로덕션 서버를 실행

Build 작업은 아래와 같이 scripts의 build명령어를 사용하여 수행한다.

npm run build

npm run build

Build를 시작하면 HTML, CSS, JavaScript...등의 파일들이 결과물로 출력된다.

해당 결과물들은 웹서버에 등록되어 실제 사용자 Browser로 전달된다.

만약 빌드 이후 코드의 변경사항이 있다면 Github에 push한 뒤, CI/CD Tool을 이요하여 코드에 대한 Test, Build를 수행한다.
(CI/CD 도구는 오류가 생기면 오류코드를 내보내고, 이상이 없다면 배포를 수행)

평균적으로 각 페이지의 크기가 1MB가 넘지 않으면 한국에서 서비스가 가능하다.

반대로 1MB가 넘으면 모바일환경에서는 렉이 발생하여 코드 스플릿팅을 적용해 용량을 분할해야한다.

결과물에서 사용된 페이지들의 타입은 다음과 같다.

λ(lambda): getServersideProps 즉 서버사이드 렌더링이 적용된 파일
●: getStaticProps가 적용된 파일
○: 서버사이드렌더링(SSR)이 아닌 정적인 파일
First Load JS: 페이지에 방문했을 때 다운로드되는 파일의 용량

또한 404 Page는 서버 렌더링 오류 페이지를 의미하며, pages/404.js 파일을 생성하여 별도의 커스터마이징이 가능하다.

자세한 방법은 해당 홈페이지에서 확인할 수 있다.

Custom Webpack

Next.js는 기존 webpack.config.js파일 설정과는 다르게 config를 이용해 기본 설정을 변경하는 방식으로 Custom Webpack을 지원한다.

프로젝트의 제일 상위 디렉토리(폴더)에 next.config.js 파일을 생성하여 Webpack을 Custom한다.

Build과정을 수행하기 위해 다음과 같이 Custom Webpack을 작성한다.

// next.config.js
module.exports = {
  compress: true,
  webpack(config, { webpack }) {
    const prod = process.env.NODE_ENV === 'production';
    const plugins = [...config.plugins];    
    return {
      ...config, // 기존설정
      mode: prod ? 'production' : 'development',
      devtool: prod ? 'hidden-source-map' : 'eval',
      plugins,
    }
  },
};

이외에 next.config.js의 추가 설정은 해당 홈페이지에서 확인할 수 있다.

Cross-Env

next.config.js파일은 package.json파일의 script 명령어가 실행될 때 실행된다.

이 때 script 명령어와 함께 Process.Env를 실행하고 싶다면 package.json파일의 script부분을 다음과 같이 수정한다.

"script": {
  "dev": "next -p 3060",
  "build": "ANALYZE=true NODE_ENV=production next build"
},

하지만 위와 같은 방법은 Window환경에서는 실행되지 않는다.

그래서 아래의 npm명령어를 통해 cross-env 라이브러리를 설치한 뒤, package.json파일을 수정하여 위와 같은 문제를 해결할 수 있다.

npm i cross-env

"script": {
  "dev": "next -p 3060",
  "build": "cross-env ANALYZE=true NODE_ENV=production next build"
},

Bundle-Analyzer

Build시 각 번들의 사이즈를 시각적으로 표현해주는 모듈

서비스의 크기가 클수록 모듈 종류가 많아지며, 용량이 커져 무거워지게 된다.

이러한 경우에 웹팩 번들 분석 플러그인(webpack bundle analyzer Plugin)이라는 모듈을 사용하여 용량이 큰 모듈을 minify 버젼을 사용하거나, 다른 방법으로 용량을 줄인다.

또한 번들링되는 모듈들을 분석하여 시각적으로도 보기 좋게 표현해주기 때문에 더욱 효과적으로 분석작업을 수행할 수 있다.

사용방법

아래 npm명령어를 통해 Bundle-Analyzer를 설치

npm i @next/bundle-analyzer

next.config.js파일을 다음과 같이 수정

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true', // 환경변수가 true면 analyzer 실행
});

module.exports = withBundleAnalyzer({
  distDir: '.next',
  webpack(config, { webpack }) {
    const prod = process.env.NODE_ENV === 'production';
    const plugins = [
      ...config.plugins,
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/),
    ];
    return {
      ...config,
      mode: prod ? 'production' : 'development',
      devtool: prod ? 'hidden-source-map' : 'eval',
      plugins,
    };
  },
});