distDir 설정하기

Next.js 프로젝트를 하다 보면 기본적으로 빌드 결과물이 .next 폴더 안에 생성되죠. 근데 가끔은 .next 대신 다른 이름의 폴더에 빌드 결과물을 저장하고 싶을 때가 있어요. 예를 들어, build라는 이름으로 폴더명을 바꾸고 싶을 때가 그렇답니다.

이럴 때는 next.config.js 파일에 distDir 설정을 추가하면 돼요.

module.exports = {
  distDir: 'build',
}

위처럼 설정하면 빌드할 때 Next.js가 .next 대신 build라는 폴더를 만들어서 거기에 결과물을 넣어줍니다. 이렇게 하면 배포 스크립트나 CI/CD 환경에서 빌드 디렉토리 이름을 내가 원하는 대로 조정할 수 있어서 편리해요.

추가로, 만약 여러 개의 빌드 디렉토리를 상황에 맞게 쉽게 변경하려면 환경 변수와 연동하는 것도 좋은 방법입니다. 예를 들어 next.config.js에서 이렇게 설정할 수도 있죠:

module.exports = {
  distDir: process.env.NEXT_DIST_DIR || '.next',
}

그럼 환경 변수 NEXT_DIST_DIR에 원하는 디렉토리 이름을 지정하면 그걸로 빌드가 되고, 설정이 없으면 기본 .next 폴더를 사용하게 돼요.

참고로, distDir을 바꾸면 .next 폴더를 참조하는 다른 툴이나 스크립트도 함께 수정해줘야 하니 주의하세요!

이제 next build를 실행하면 Next.js가 기본 .next 폴더 대신 build라는 폴더를 사용하게 됩니다.

여기서 주의할 점! distDir 설정은 프로젝트 디렉터리 내에 있어야 해요. 예를 들어 ../build처럼 프로젝트 밖 경로를 지정하면 안 됩니다.

---

추가로 설명을 조금 더 하자면, distDir 옵션은 next.config.js 파일에서 설정할 수 있어요. 이 옵션은 빌드 결과물이 저장될 폴더 이름과 위치를 바꾸고 싶을 때 유용하죠.

예를 들어:

// next.config.js
module.exports = {
  distDir: 'build',
};

이렇게 하면 .next가 아니라 build라는 이름의 폴더에 빌드 결과물이 생성됩니다.

왜 이렇게 할까요? 보통 배포 파이프라인이나 특정 프로젝트 구조를 맞출 때 디렉토리 이름을 커스터마이징해야 하는 경우가 있어요. 예를 들어, 기존 프로젝트에 Next.js를 새로 도입하거나, CI/CD 설정과 맞추기 위해서죠.

하지만 프로젝트 밖 경로는 보안 및 관리상 문제로 제한됩니다. 경로가 프로젝트 폴더를 벗어나면 Next.js가 인식하지 못하니 참고하세요!