Next.js 성능 최적화 해보기

성능 측정

설치

next/bundle-analyzer를 다운받자

npm i @next/bundle-analyzer
# or
yarn add @next/bundle-analyzer
# or
pnpm add @next/bundle-analyzer

설정

/** @type {import('next').NextConfig} */
const nextConfig = {};

import withBundleAnalyzer from "@next/bundle-analyzer";

export default process.env.ANALYZE === "true"
  ? withBundleAnalyzer()(nextConfig)
  : nextConfig;

공식문서에 적혀있는대로 next.config.mjs 파일을 설정해주자.

실행

ANALYZE=true npm run build
# or
ANALYZE=true yarn build
# or
ANALYZE=true pnpm build

실행과 동시에 빌드가 시작되며 해당 프로젝트의 빌드사이즈 등을 측정해준다.
빌드가 종료되면 .next 폴더가 생성되는데, 그 안의 analyze 폴더를 열어보면 html 파일들이 있다. 이는 빌드된 파일들의 크기를 비교해 아래와 같이 가시적으로 사이즈를 보여준다.

하지만 위의 스크립트를 계속 쳐주기에는 너무 길기 때문에 아래와 같이 script 를 추가했다.

"analyze": "ANALYZE=true next build"

이제 npm run analyze 만 입력해도 동일하게 동작한다.