Next.js 14 App Router 전환기:
Static Export로 SEO 챙기기
기존 레거시 서버 환경을 최대한 유지하면서 Next.js의 모던 생태계와 강력한 디자인 시스템을 도입하기 위한 'Static HTML Export' 여정기.
왜 Next.js 정적 배포(Static Export)인가?
IT 에이전시나 자체 솔루션 플랫폼을 운영할 때 기업용 홈페이지의 생명은 두 가지입니다.압도적으로 아름다운 UI와 구글 검색에 착 달라붙는 막강한 SEO(검색엔진 최적화)입니다. 기존 PHP 기반의 사이트는 SEO 설정은 가능했으나 테일윈드(Tailwind)나 컴포넌트 단위의 빠른 디자인 고도화가 어렵다는 한계가 명확했습니다.
저희는 백엔드나 기존 서버 인프라(Apache/Nginx 기반 Linux 웹 호스팅)를 아예 뒤집어 엎는 위험을 감수하기보다는, Next.js로 개발하고 모든 HTML을 사전에 빌드하여 뽑아내는 output: 'export' 모드를 선택했습니다.
이미지 최적화의 난관 극복
Next.js 14의 <Image> 컴포넌트는 매우 훌륭하지만, 자체 노드(Node.js) 서버 구동 없이 Static Export를 사용할 때는 기본 이미지 최적화 모듈이 동작하지 않아 에러를 내뱉습니다.
위 설정을 추가함으로써, 빌드 타임에 이미지들이 그대로 `/out` 폴더로 추출되게 셋팅했습니다. 비록 Next.js의 실시간 리사이징 기능은 꺼지지만, 대신 모든 파일이 가벼운 Vercel 호스팅이 아닌, 우리의 기존 레거시 리눅스 서버에 그대로 `.zip` 파일 하나 툭 올려 배포할 수 있는 엄청난 호환성을 갖추게 됩니다.
결과: 렌더링 속도 0.5초 미만
Static Export된 페이지들은 모두 순수한 HTML, CSS, 정제된 JS 번들로 이루어져 있어 초기 렌더링 속도가 파격적으로 빠릅니다. 사용자가 웹사이트에 방문하자마자 DOM이 렌더링되고, 곧바로 봇(Crawler)들이 메타데이터를 쓸어가면서 웹사이트 퀄리티와 검색 노출도가 이전 대비 300% 이상 훌쩍 성장했습니다.