[Next.js] Vercel 빌드 속도를 60% 단축하기

 

❓ 문제 상황: 빌드 시간이 너무 오래 걸린다

우리 팀의 Next.js 기반 프로젝트는 Vercel을 통해 배포되고 있었는데, 어느 순간부터 배포 빌드 시간이 3분 41초를 넘기기 시작했다.

버셀에서 배포하면 프리뷰로 먼저배포되고, promote to production 할수 있는데

pwa 웹앱을 구현중에서는 브라우저의 모바일기기 보다 실제 모바일 pwa 앱으로 확인해야할 때가 있었는데(fcm,노치 등)

빌드시간이 너무 오래걸려서 빠르게 수정해서 배포하고 확인하기가 어려웠다. 

 

페이지 수나 컴포넌트 수가 많지 않은 비교적 경량 프로젝트였기 때문에, 이 빌드 시간은 너무 과하다고 판단했음

 

Vercel의 Serverless 환경에서 빌드가 오래 걸리면 생산성에 직접적인 영향을 미치기 때문에, 해결해보자

 

🔍 문제 원인 분석

 

단계 시작 시간 종료 시간 소요 시간 비고

📥 Git Clone & Cache Restore	23:31:00	23:31:04	~4초	빠름
📦 pnpm install	23:31:05	23:31:30	~25초	빠른 편
⚙️ prebuild (generate-firebase-config.js)	23:31:30	23:31:30	~0.04초	매우 빠름
🛠 next build 시작	23:31:30	23:34:06	💥 2분 36초	💥 가장 오래 걸림
🔍 Lint & Type Check	23:34:06	23:34:18	~12초	준수
📄 SSG/ISR/Routes 생성	23:34:18	23:34:32	~14초	빠름
🚚 배포 & 캐시 업로드	23:34:32	23:35:08	~36초	정상 범위

 

1. .next/cache가 있어도 캐싱이 되지 않음

빌드 로그를 보면 매번 모든 페이지가 다시 컴파일되고 있었다.

일반적으로 Next.js는 .next/cache를 활용하여 변경되지 않은 페이지는 재사용하게 되어 있는데 
하지만 빌드 로그를 보면 Next.js의 compiling 로그가 모든 라우트에서 반복되고 있었다

추측된 원인: 빌드 시점에서 캐시 디렉토리를 제대로 참조하지 않거나, 캐시가 저장되지 않고 있음.

 

 

2. next.config.js에서 output: "standalone" 누락

Next.js 12.2 이후부터는 output: "standalone" 설정을 통해 Vercel 배포 시 필요한 최소한의 파일만 .next/standalone에 번들링할 수 있다 !! 

이 설정이 없으면 Vercel은 .next 전체를 분석하며, 불필요한 파일까지 서버리스 번들에 포함되면서 빌드/배포 시간이 지연된다.

 

 

3. pnpm 캐시가 효과적으로 사용되지 않음

우리는 pnpm을 패키지 매니저로 사용하고 있었지만, .npmrc 파일이 없었고, pnpm-lock.yaml도 일부 workspace에서 누락된 상태였다.
이로 인해 Vercel 빌드머신이 매번 의존성을 새로 설치하게 되었고, 이 역시 빌드 시간 증가의 원인이었다

 

🔧 해결 방법

 1. next.config.js에 output: "standalone" 추가

// next.config.js
const nextConfig = {
  output: "standalone", // ✅ 서버리스 환경에서 빌드 최적화
};

module.exports = nextConfig;

 

이 설정을 통해 .next/standalone 경로에 필요한 서버 번들만 생성되며, Vercel은 이 파일만 기준으로 서버리스 함수로 배포됨

 

2. .npmrc 파일 추가하여 pnpm 캐시 최적화

Vercel은 .npmrc에 따라 pnpm store를 재사용할 수 있습니다. 아래 설정을 추가했습니다:

package-manager=pnpm@9.15.0     #Vercel과 로컬 모두 동일한 pnpm 버전을 사용하게 함
shared-workspace-lockfile=true  #일관된 lockfile 유지로 의존성 문제 방지
prefer-frozen-lockfile=true     #lockfile 변경 없이 빠르고 예측 가능한 설치

# 불필요한 네트워크 호출 감소 → 의존성 설치 시간 단축

 

• shared-workspace-lockfile: 루트 lockfile만 사용하여 workspace 간 버전 충돌 방지
• prefer-frozen-lockfile: lockfile이 있는 경우 설치 속도 향상

 

결과: 빌드 시간 3분 41초 → 1분 30초로 단축

• Vercel 상 빌드 로그 분석 결과, 페이지 컴파일 시간이 40% 이상 감소
• 의존성 설치 속도는 pnpm 캐시 활용으로 기존 대비 약 2배 빨라짐
• 최종적으로 빌드 완료까지 걸리는 시간은 약 3분 41초 → 1분 30~40초로 60% 단축
• 배포 사이클이 짧아져 팀의 기능 QA 속도 및 개발 피드백 루프가 크게 향상됨

이전

 

결과

💡 팀 생산성에 미친 영향

• 이전에는 배포 후 기능 테스트를 위해 평균 4분을 기다려야 했지만, 이제는 1분 30초 내외로 완료

 

---

 

 

• 빌드 속도는 결국 “불필요한 작업을 얼마나 제거했느냐”의 싸움이다.
• Next.js는 기본값이 최적이 아닐 수 있으며, output 옵션을 비롯한 설정 최적화가 필수다.
• 캐시를 "쓸 수 있게" 만드는 것도 중요하지만, "잘 쓰게" 만드는 게 더 중요하다.