NEXT.JS 프레임워크 활용 노하우

이 게시글에서는 AWS ECS 또는 EKS를 사용하여 NEXT.JS 웹 페이지를 운영할 때 유용한 두 가지 노하우를 공유합니다.

1. NEXT.JS와 CDN 연동하기

assetPrefix 옵션을 사용하여 NEXT.JS와 CDN(예: AWS Cloudfront)을 연동할 수 있습니다. 빌드 후 .next/static 폴더를 CDN의 Origin에 업로드할 때 경로를 변경해야 합니다.

• CDN을 통해 정적 파일을 제공함으로써 NEXT.JS 서버는 SSR과 이미지 최적화에 집중할 수 있습니다.
• CDN 사용으로 엣지 포인트에서 빠른 파일 제공과 압축 성능 개선이 가능합니다.

2. NEXT.JS와 도커 이미지 경량화하기

output: standalone 옵션을 활용하여 도커 이미지의 크기를 줄일 수 있습니다. 이 옵션 적용 전후로 이미지 크기가 약 180MB에서 70MB로 감소하였습니다.

• 작은 이미지 크기는 배포 속도 향상에 기여합니다.
• 이미지 경량화는 도커 호스트에서의 다운로드 시간을 단축시킵니다.